如何将 formControlName 赋予 FormArray 对象 - Angular 2 (ReactiveFormsModule)

Question

在我的应用程序中，我使用 Reactive Forms 制作了一个表单。在我的应用程序中，它们是一个按钮 Add new Fields 单击此按钮后会添加新字段。

我可以添加新字段，但无法分配 formControlName。

任何人都可以告诉我正确的路径如何将 formControlName 添加到这些动态添加的字段中。

Here is the Plnkr for this.

Answer 1

你有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>

Fixed Plunker

另见

如何将 formControlName 赋予 FormArray 对象 - Angular 2 (ReactiveFormsModule)

How to give formControlName to a FormArray object - Angular 2 (ReactiveFormsModule)

angular

angular-reactive-forms

formarray