迭代 Angular 2+ FormArray

Posted 2023-03-13

【中文标题】迭代 Angular 2+ FormArray

【英文标题】：Iterate Angular 2+ FormArray

【发布时间】：2018-08-29 21:59:03

【问题描述】：

我有一个 FormArray，需要遍历它的每个成员。

我看到the docs 中有一个get 方法，但我看不到从哪里获取密钥，甚至看不到长度。

如何迭代 FormArray？

【参考方案1】：

您在FormArray 中有一个属性controls，它是AbstractControl 对象的数组。查看FormArray 的具体文档，您会看到它们也继承自AbstractControl，就像您发布的FormControl。

请注意，在控件数组中，除了 FormControl 对象之外，您还可以在 FormArray 或 FormGroup 对象中添加对象，因为可以有嵌套的组或数组。

这是一个简单的例子：

for (let control of formArray.controls) 
   if (control instanceof FormControl) 
      // is a FormControl
   
   if (control instanceof FormGroup) 
      // is a FormGroup  
   
   if (control instanceof FormArray) 
      // is a FormArray
   

【讨论】：

其实我不久前就想通了。感谢您提供更多信息。

不知道为什么没有记录。

This SO answer 帮助了我：this.form = this.fb.group( userIds: this.fb.array([]) ); const userIds = this.form.controls.userIds as FormArray; userIds.value.forEach(key => this.clinet.updateContactGroup(key, this.groupId).subscribe(); );

你可以遍历formArray.controls，请看下面的答案

【参考方案2】：

我通过循环formArray.controls 解决了这个问题：

  formArray.controls.forEach((element, index) => 
    ...
  );

【参考方案3】：

如果有人需要帮助在模板中迭代它们（就像我做的那样），你可以这样做。

在这种情况下，我们有 FormArray，其中每个孩子都是 FormControl

get myRows(): FormControl[] 
    return (this.<your form group>.get('<field name>') as FormArray).controls as FormControl[];
  

在模板中

*ngFor="let row of myRows"