Angular传递formGroup到子组件报错AbstractControl|null无法分配给FormGroup

问题根因 #

Angular 中 FormGroup.get() 方法的返回值类型默认是 AbstractControl | null，即便你业务逻辑上能确定 bank 对应的控件一定是 FormGroup 类型，TypeScript 静态类型检查也不会自动识别这个隐含逻辑，因此会抛出类型不匹配的报错。

解决方法 #

下面提供3种常用的解决方案，可根据自己的项目习惯选择：

方案1：新增类型断言方法（最推荐，类型安全） #

在 link-accounts.component.ts 中新增一个专门的类型转换方法，显式告诉 TypeScript 控件的实际类型：

// link-accounts.component.ts
import { AbstractControl, FormGroup } from '@angular/forms';

// 类内部新增方法
asFormGroup(control: AbstractControl | null): FormGroup {
  return control as FormGroup;
}

修改 link-accounts.component.html 中绑定的代码，调用上述方法即可：

<app-bank
  [parentForm]="linkAccounts"
  [formGroup]="asFormGroup(linkAccounts.get('bank'))"
></app-bank>

方案2：模板内直接做类型转换（适合临时快速调试） #

如果你确定 bank 表单必然存在且为 FormGroup 类型，可以直接在模板中绕过类型检查：

<!-- 写法1：使用$any全局函数跳过类型检查 -->
[formGroup]="$any(linkAccounts.get('bank'))"

<!-- 写法2：非空断言+显式类型转换 -->
[formGroup]="linkAccounts.get('bank')! as FormGroup"

注意该方案绕过了 TypeScript 校验，类型安全性较低，不建议生产环境长期使用。

方案3：提前封装表单为类属性（可读性高） #

在 link-accounts.component.ts 中通过 getter 提前把 bank 表单封装为 FormGroup 类型的属性：

// link-accounts.component.ts 类内部新增
get bankForm(): FormGroup {
  return this.linkAccounts.get('bank') as FormGroup;
}

模板直接绑定该属性即可：

[formGroup]="bankForm"

额外提示 #

你当前 bank.component.ts 中同时使用了 ControlContainer 注入父表单、和 @Input() 接收 formGroup 两种方案，注意避免逻辑冲突：如果用 ControlContainer 继承父级表单上下文，不需要额外传递 formGroup 输入属性也能正常工作。

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