Angular FormArray - AbstractControl 类型上不存在属性控件答案

【问题标题】：Angular FormArray - Property controls does not exist on type AbstractControlAngular FormArray - AbstractControl 类型上不存在属性控件
【发布时间】：2019-10-10 19:55:24
【问题描述】：

我想在 Angular7 中构建表单数组

控件带有红色下划线。我什至在提供应用程序之前就遇到了这个错误：

“AbstractControl”类型上不存在属性“控件”

组件

addSubmenugroup(j) {
    console.log(j);
    const control = <FormArray>this.form.get('submenus').controls[j].get('submenugroups');
   // console.log(control);
    control.push(this.initSubmenugroup());  
  }


  removeSubmenugroup(j){
     const control = <FormArray>this.form.get('submenus').controls[j].get('submenugroups');
     control.removeAt(j);
  }

当我点击提交按钮时，它应该生成表单数组。

【问题讨论】：

试试这个this.form.value.submenus[j].submenugroups
this.form.get('submenus') 将返回一个抽象控件！没有任何controls 属性
提供FormGroup代码和正确的解释！
This 会帮助你

标签： angular

【解决方案1】：

FormGroup 的get 方法返回值AbstractControl，这就是静态类型检查器给你一个错误的原因。 AbstractControl 本身没有 controls 属性。

https://angular.io/api/forms/FormControl 更多信息在这里。

你能做的是

const formArray = this.form.get('submenus') as FormArray;
const secondArray = formArray.get('submenugroups`) as FormArray;
const control = secondArray.controls[...] as FormControl;

// Continue with your logic.

【讨论】：

我在里面放什么 [...]
因为它是一个数组，是你要获取的元素的索引。如果使用 FormGroup，则需要设置 key。例如formGroup.get('someKey')

【解决方案2】：

另外，您可以在 html 文件中使用安全导航运算符?。

变化：

yourForm.get('myField').controls

到：

myForm.get('myField')?.controls

【讨论】：