如何以 Angular 反应形式迭代 FormGroup 中的 FormArray

Question

我的表单结构如下图

-MainForm(ParentForm)
 -FormGroup(MedicineGroup)
  -FormArray(MedicineArray)

我想迭代 MedicineArray 为此，我做了一些研究并编写了以下代码

for (let control of soForm.get('MedicineGroup').controls['MedicineArray'].controls) {
    medObj.name.push(control.controls['MedName'].value);
  }

代码运行良好，但我收到一条警告，上面写着

Property 'controls' does not exist on type 'AbstractControl'.

是否有任何其他或更好的方法来迭代 FormGroup 中的 FormArray？

Answer 1

您可以尝试使用 ['controls'] 而不是 .controls:

for (let control of soForm.get('MedicineGroup')['controls']['MedicineArray']['controls']) {
    // ...
}

另一种选择是：

const formArray = soForm.get('MedicineGroup.MedicineArray') as FormArray;
console.log(formArray);

使用圆点表示法访问嵌套控件是一种很好的做法。

Answer 2

发生这种情况的原因是因为类型系统知道您有一个 AbstractControl，因为 AbstractControl.prototype.get() returns 一个 AbstractControl，但它不知道您是哪个具体的 AbstractControl正在引用，因此访问 controls 属性会导致此警告。

关于如何解决它，您有一些选择，铸造或引入另一个符号，但方法是相同的：提供更好的类型信息：

let aFormArray: FormArray = soForm.get('MedicineGroup.MedicineArray');

for (let c of aFormArray.controls) {
    medObj.name.push(c.controls['MedName'].value);
}

如何以 Angular 反应形式迭代 FormGroup 中的 FormArray

How to iterate over FormArray in FormGroup in an Angular reactive Form

javascript

typescript

angular

angular-reactive-forms