如何使用Angular6僅使用FormArray創建反應形式？

Question

我有一個表，可以動態構造行，如下所示

<form [formGroup]='employeeForm'>
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">name</th>
      <th scope="col">contact details</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let details of employeeDetails'>
      <th formControlName='name' scope="row">{{details.name}}</th>
      <td formControlName='employeeName'>{{details.contactDetails}}</td>
    </tr>
  </tbody>
</table>
</form>

現在，如何將動態創建的控件附加到表單？ 我嘗試了這個

 employeeForm: FormGroup
constructor(private formbuilder: FormBuilder) { }
 ngOnInit() {
this.employeeForm = this.formbuilder.array([])
  }

但這給了我錯誤提示，formGroup不能包含formArray

如何使用反應式表單方法將formArray添加到formGroup中？

Answer 1

Akber Iqbal在其評論中鏈接到的示例可以通過FormBuilder實現。 在沒有FormBuilder的情況下，查看類型如何匹配可能會更容易。 FormControl代表html中的實際表單元素（輸入，文本區域等）。 FormGroup和FormArray都是容納FormGroups，FormArrays和/或FormControls的容器。 構造FormGroup或FormArray時，將傳入其初始子控件。

在父FormGroup下，employeeForm包含一個FormArray。 我將兩個默認的子FormControls添加到FormArray：

employeeForm: FormGroup;
nameArray: FormArray;

ngOnInit(){
    this.nameArray = new FormArray([
        new FormControl('name1'),
        new FormControl('name2')
    ]);

    this.employeeForm = new FormGroup({
        employeeNameArray: this.nameArray
    });
}

在模板中，您應該能夠遍歷FormArray的子​​級

<tr *ngFor="let employeeName of nameArray.controls; let i=index">
    <td>Name: <input type="text" [formControlName]="i"></td>
</tr>

如果您希望每個員工擁有多個表單元素（一個用於名稱，一個用於地址），則可能需要再一層嵌套，其中FormArray的直接子級是FormGroup，然后每個子組包含一個名稱FormControl和一個地址FormControl 。