在我的应用程序中,我使用 Reactive Forms 制作了一个表单。在我的应用程序中,他们是一个按钮 Add new Fields
单击此按钮添加新字段。
我可以添加新字段,但无法分配 formControlName
。
任何人都可以告诉我正确的路径如何将 formControlName
添加到这些动态添加的字段中。
最佳答案
您有 FormGroup
数组的 formArray
。
所以使用 formArrayName
和 formGroupName
的循环与 formControlName(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>
另见
关于angular - 如何将 formControlName 赋予 FormArray 对象 - Angular 2 (ReactiveFormsModule),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44697231/