How to pass formControlName to FormArray object - Angular 2 (ReactiveFormsModule)
In my application, I made a form using Reactive Forms. In my application, their button Add new Fields
adds new fields when this button is clicked.
I can add new fields, but I cannot assign formControlName
.
Can anyone show me the correct way how to add formControlName
to these dynamically added fields.
source to share
You have an formArray
array FormGroup
.
So use formArrayName
with a loop formGroupName
withformControlName(itemDetail, quantity, rate...)
<table formArrayName="salesList">
<tr>
<th>Item Detail</th>
<th>Quantity</th>
<th>Rate</th>
<th>Tax</th>
<th>Amount</th>
</tr>
<!--Input controls -->
<tr *ngFor="let saleList of salesListArray.controls;let i = index" [formGroupName]="i">
<td>
<div class="col-sm-6">
<input class="form-control" type="text" placeholder="Item Detail" formControlName = "itemDetail"/>
</div>
</td>
<td>
<div class="col-sm-6">
<input class="form-control" type="text" placeholder="0" formControlName = "quantity" />
</div>
</td>
<td>
<div class="col-sm-6">
<input class="form-control" type="text" placeholder="0.00" formControlName = "rate"/>
</div>
</td>
<td>
<div class="col-sm-6">
<input class="form-control" type="text" placeholder="Select a tax" formControlName = "tax"/>
</div>
</td>
<td>
<div class="col-sm-6">
<span>{{saleList.amount}}}</span>
</div>
</td>
</tr>
</table>
see also
source to share
I have problems .... can anyone help me ??
https://stackblitz.com/edit/form-array-angular-kgtu2d?file=src/app/app.component.html
source to share