Angular6嵌套FormGroup报错求助：AbstractControl无法赋值给FormGroup

我明白你遇到的问题了——TypeScript的类型检查在这里卡了壳，因为FormGroup.get()默认返回的是AbstractControl类型，而你声明的apiForm是FormGroup类型，编译器没办法确定返回的控件一定是FormGroup，所以抛出了类型不匹配的错误。下面给你两种简单的解决方法，以及一些优化建议：

1. 用类型断言明确指定返回类型 #

你可以直接在获取控件的时候用as FormGroup告诉编译器这个控件就是FormGroup，这样就能通过类型检查了：

this.apiForm = this.serviceItemForm.get('api') as FormGroup;

2. 用Getter简化嵌套FormGroup的访问 #

更推荐的方式是在组件里定义一个getter方法，这样不管是组件逻辑还是模板里，都能直接访问这个嵌套的FormGroup，不用手动赋值：

get apiForm(): FormGroup {
  return this.serviceItemForm.get('api') as FormGroup;
}

之后你在组件里可以直接用this.apiForm，模板里直接用apiForm就行，非常方便。

优化你的FormGroup创建代码 #

另外，你原来的代码里混合使用了new FormControl()和FormBuilder的语法，其实可以统一用FormBuilder的简洁写法，让代码更清晰：

this.serviceItemForm = this.fb.group({
  name: ['', Validators.required],
  description: ['', Validators.required],
  categoryIds: [[], Validators.required],
  tags: [],
  status: '',
  orderFormType: [[], Validators.required],
  orderFormKey: [[], Validators.required],
  workflow: [],
  orderFormAction: ['', Validators.required],
  customUI: [''],
  api: this.fb.group({
    apiurl: [''],
    apimethod: [''],
    headers: this.fb.array([]),
    payload: ''
  }),
  userGroup: []
});

这里用[初始值, 验证器]的形式替代new FormControl()，代码更紧凑易读。

模板中使用嵌套FormGroup的示例 #

最后给你一个模板里使用嵌套FormGroup的例子，确保你能正确绑定控件：

<form [formGroup]="serviceItemForm">
  <!-- 外层表单控件 -->
  <div>
    <label>名称：</label>
    <input formControlName="name" />
  </div>

  <!-- 嵌套的API表单组 -->
  <div formGroupName="api">
    <h3>API配置</h3>
    <div>
      <label>API地址：</label>
      <input formControlName="apiurl" />
    </div>
    <div>
      <label>请求方法：</label>
      <select formControlName="apimethod">
        <option value="GET">GET</option>
        <option value="POST">POST</option>
        <option value="PUT">PUT</option>
      </select>
    </div>
  </div>
</form>

这样处理之后，你的嵌套FormGroup就能正常使用，类型错误也会消失啦～

内容的提问来源于stack exchange，提问作者raju