I am currently exploring Angular and attempting to create dynamic forms (forms within forms).
The goal is to achieve the following:
https://i.sstatic.net/IaoJ4.png
Upon clicking the plus button, the sub-dropdown section should be added. Additionally, clicking on Add another Mapping should display a single box.
Here is my HTML file:
<div class="tab-pane" id="tab_3">
<form [formGroup]="attrForm" novalidate (ngSubmit)="save(attrForm)">
<div formArrayName="schemaAttr">
<div *ngFor="let address of attrForm.controls.schemaAttr.controls; let i=index" class="panel panel-default">
<div class="panel-heading">
<span>Schemas {{i + 1}}</span>
<span class="glyphicon glyphicon-remove pull-right" *ngIf="attrForm.controls.schemaAttr.controls.length > 1" (click)="removeschmeAttr(i)"></span>
</div>
<div class="panel-body" [formGroupName]="i">
<div class="form-group col-xs-3">
<ng-select [items]="configuredSchema" [closeOnSelect]="true" bindLabel="name" placeholder="Choose a schema" (change)="onChange($event)" [(ngModel)]="selectedschema1">
</ng-select>
</div>
<div class="form-group col-xs-3">
<ng-select [items]="configuredSchema" [closeOnSelect]="true" bindLabel="name" placeholder="Choose a schema" (change)="onChange2($event)" [(ngModel)]="selectedschema2">
</ng-select>
</div>
</div>
<div class="panel-body" [formGroupName]="i">
<form [formGroup]="addattrForm" novalidate>
<div formArrayName="addAttr">
<div *ngFor="let attribute of addattrForm.controls.addAttr.controls; let i=index" class="row">
<div class="form-group col-xs-3 col-md-6 col-lg-3">
<select [(ngModel)] ="selectedattribute1">
<option *ngFor="let attribute of attributes1" value={{attribute}} >
{{attribute}}
</option>
</select>
</div>
<div class="form-group col-xs-3 col-md-6 col-lg-3">
<select [(ngModel)] ="selectedattribute2" >
<option *ngFor="let attribute of attributes2" value={{attribute}} >
{{attribute}}
</option>
</select>
</div>
<div class="margin-20">
<a (click)="addAttr()" style="cursor: default">
+
</a>
</div>
</div>
</div>
</form>
</div>
<div class="margin-20">
<a (click)="addschmeAttr(addattrForm)" style="cursor: default">
Map Another schema +
</a>
</div>
</div>
</div>
<div class="margin-20">
<button type="submit" class="btn btn-primary pull-right" [disabled]="!attrForm.valid">Submit</button>
</div>
</form>
However, the desired output is not achieved. Clicking on Add Another Mapping results in the previously mapped dropdown appearing as an empty sub-dropdown. Any suggestions for better ideas to accomplish this?