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

您可以尝试使用<div [innerHTML]='text'></div>代替['controls']：

.controls

另一个选择是：

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

使用点表示法访问嵌套控件是一种好习惯。

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);
}

如何在Angular反应形式的FormGroup中的FormArray上进行迭代

2 个答案: