Bind of fields in dynamic form Angular 5

0

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?

    
asked by anonymous 13.07.2018 / 17:03

0 answers