Angular报错：Type AbstractControl<any>无法赋值给FormControl

方案1：修改子组件的输入类型为AbstractControl #

子组件里把@Input()的类型从FormControl改成AbstractControl即可——FormControl本身是AbstractControl的子类，且Angular的[formControl]指令天然支持接收AbstractControl类型的值，这样父组件传过来的f['email']就能完美匹配。

修改子组件的component.ts代码：

import { AbstractControl } from '@angular/forms';

@Input() control: AbstractControl;

子组件模板无需改动：

<input [formControl]="control">

方案2：在父组件模板中做类型断言 #

如果不想修改子组件的类型约束，可以在父组件模板里通过语法跳过类型检查：

方式A：使用$any()工具函数 #

<app-input [control]="$any(f['email'])"></app-input>

方式B：使用类型断言（Angular 14+支持） #

<app-input [control]="f['email'] as FormControl"></app-input>

方案3：修改父组件的getter，返回具体类型的控件对象 #

在父组件里定义更明确的类型约束，让getter直接返回带有具体FormControl类型的对象：

修改父组件的component.ts代码：

import { FormControl, FormGroup } from '@angular/forms';

// 定义表单字段的类型接口
interface UserForm {
  email: FormControl;
}

public form: FormGroup<UserForm>; // 给FormGroup指定泛型类型

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    email: ['', [Validators.email, Validators.required]],
  });
}

// 让getter返回明确的类型
get f() {
  return this.form.controls as UserForm;
}

之后父组件模板可以直接用明确类型的控件，不再报错：

<app-input [control]="f.email"></app-input>

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