I have a form that will be created in a totally dynamic way:
<form id="custom-asset-form" #form="ngForm" (ngSubmit)="saveAsset(form)">
<div *ngIf="asset">
<app-ad-child [adItem]="asset"></app-ad-child>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-success">Save</button>
</div>
</div>
The app-ad-child
component contains the fields as in the example below, and may contain other app-ad-child
within itself, it would be a kind of recursion.
<!-- FIELD ASSET -->
<ng-container *ngIf="field.type == 'Asset'">
<div class="col-md-12">
<div class="form-group">
<label for="{{field.name}}">{{field.name}}
<button type="button" class="btn btn-success btn-sm btn-circular" (click)="addAsset(i, field.allowed_values[0], asset.settings.index)">
<i class="fa fa-plus"></i>
</button>
</label>
<div *ngIf="assetsComponent">
<app-ad-child [adItem]="assetsComponent[i]"></app-ad-child>
</div>
</div>
</div>
</ng-container>
<!-- FIELD TEXT -->
<ng-container *ngIf="field.type == 'String'">
<div class="col-md-4">
<div class="form-group">
<label for="{{field.name}}">{{field.name}}</label>
<input type="string" class="form-control" id="{{field.name}}" name="{{field.name + '-' + asset.settings.index}}" ngModel placeholder="{{field.name}}">
</div>
</div>
</ng-container>
The problem is that these components are loaded according to the user's actions, so when I submit a submit in the form, the values do not appear in the ngForm
object. How can I do this correctly?