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

Posted 2023-03-13

【中文标题】如何使用 Angular6 仅使用 FormArray 创建反应式表单？

【英文标题】：How to create a Reactive Form using only FormArray using Angular6?

【发布时间】：2019-08-07 20:22:57

【问题描述】：

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

<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 添加到 formGroup 中？

【问题讨论】：

employeeForm 是（并且必须是）FormGroup 类型。您正在尝试使用this.formbuilder.array([]) 对其进行初始化。 FormBuilder.array() 创建并返回 FormArray，而不是 FormGroup。所以这不可能是正确的。使用 arra() 创建一个 FormArray。使用 group() 创建一个 FormGroup。阅读指南以了解什么是表单组和表单数组，以及如何使用它们。 angular.io/guide/reactive-forms

前几天做了一个简单的demo，可能会告诉你一个简单的方法：***.com/questions/55135226/…

谢谢@AkberIqbal，帮了大忙

@LijinDurairaj，我很高兴它有帮助，希望您投票支持它以提高知名度

【参考方案1】：

Akber Iqbal links to 在他们的评论中使用 FormBuilder 完成了您想要的示例。不过，在没有 FormBuilder 的情况下，可能更容易看到类型如何匹配。 FormControl 代表 html 中的实际表单元素（输入、文本区域等）。 FormGroup 和 FormArray 都是混合了 FormGroups、FormArrays 和/或 FormControls 的容器。构造 FormGroup 或 FormArray 时，传入其初始子控件。

在父 FormGroup 下，employeeForm 包含一个 FormArray。我将向 FormArray 添加两个默认的子 FormControl：

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。

【讨论】：

但是看到这不在<form> 标记中，您正在失去表单的所有其他功能，例如表单中的提交按钮？