如何使用Angular6仅使用FormArray创建反应式表单？

我有一个动态构造行的表，如下所示

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

但是它给了我一个错误声明，formGroup不能包含 形式阵列

---

如何使用反应式表单方法将我的formArray添加到formGroup中？

Akber Iqbal在其评论中提供的示例符合您对FormBuilder的要求。但是，在没有FormBuilder的情况下，可能更容易看到类型如何匹配。

FormControl

表示html中的实际表单元素（input、textarea等）

FormGroup

和

FormArray

都是包含FormGroups、FormArray和/或FormControls组合的容器。构造FormGroup或FormArray时，传入其初始子控件

在父窗体组下方，employeeForm包含一个FormArray。我将向FormArray添加两个默认的子FormControls：

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，每个都包含一个name FormControl和一个address FormControl。

employeeForm是（并且必须是）FormGroup类型。您正在尝试使用

this.formbuilder.array（[]）

初始化它。创建并返回FormArray，而不是FormGroup。所以这不可能是正确的。使用arra（）创建FormArray。使用group（）创建FormGroup。阅读指南，了解什么是表单组和表单数组，以及如何使用它们。几天前做了一个简单的演示，它可能会向您展示一个简单的方法：谢谢@AkberIqbal，这是一个非常好的例子help@LijinDurairaj，我很高兴它能帮上忙，希望能有人投票支持它，让它更具知名度

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