如何以 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()返回一个AbstractControl，但它不知道您正在引用哪个具体 AbstractControl，因此访问controls属性会导致此警告。

您可以选择如何解决它，转换或引入另一个符号，但方法是相同的：提供更好的类型信息：

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

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