如何将FormControlName赋值给FormArray对象 - Angular 2（ReactiveFormsModule）

Question

在我的应用程序中，我使用Reactive Forms创建了一个表单。在我的应用程序，他们是一个按钮Add new Fields点击此按钮后，新的领域被添加。

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

任何人都可以告诉我正确的路径，我怎样才能将formControlName添加到这些动态添加的字段。

Here is the Plnkr for this.

Answer 1

你的FormGroup阵列的formArray。

因此与formGroupName循环使用formArrayName与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

参见

• https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2
• https://angular.io/guide/reactive-forms#display-the-formarray