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

Question

我有一个 table 动态构造行如下

<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([])
  }

but it is giving me error stating, the formGroup cannot contain formArray

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

Answer 1

Akber Iqbal links to 在他们的评论中使用 FormBuilder 执行您想要的操作的示例。不过，在没有 FormBuilder 的情况下，可能更容易看出类型是如何匹配的。 FormControl 表示 html 中的实际表单元素（input、textarea 等）。 FormGroup 和 FormArray 都是包含 FormGroups、FormArrays、and/or FormControls 的容器。当您构建 FormGroup 或 FormArray 时，您传入其初始子控件。

在父 FormGroup 之下，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，每个都包含一个名称FormControl 和地址 FormControl.

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

How to create a Reactive Form using only FormArray using Angular6?

angular2-forms

angular

angular-reactive-forms

formgroups

angular6