Angular构建报错：AbstractControl无法赋值给FormControl的解决方法

首先，咱们拆解下你遇到的问题根源：

• FormGroup.get()方法返回的类型是AbstractControl | null，它是FormControl的父类。TypeScript的类型系统不允许直接把父类实例赋值给子类类型的参数，这就是你看到Argument of type 'AbstractControl' is not assignable to parameter of type 'FormControl'报错的核心原因。
• 你提到移除AbstractControl类型注解（相当于用any类型）确实能消报错，但这是绕过了TypeScript的类型检查，会丢掉它带来的类型安全保障，不是最优解。

下面给你几个更合理的解决方法：

方案1：用Getter明确表单控件类型（推荐） #

在你的组件类里，给目标表单控件定义一个Getter，通过类型断言明确它是FormControl，同时确保控件存在的逻辑：

// 组件类中添加
get numberControl(): FormControl {
  // 这里断言为FormControl，前提是你确定这个控件在表单中一定存在
  return this.addNewSiteForm.get('number') as FormControl;
}

然后在模板中直接调用这个Getter：

<mat-error>
  <ng-container *ngFor="let error of errors(numberControl)">
    {{ errorMessages[error] }}<br />
  </ng-container>
</mat-error>

你的errors方法可以保持原有的AbstractControl参数（因为FormControl继承自AbstractControl，完全兼容）：

errors(ctrl: AbstractControl ): string[] {
  return ctrl.errors ? Object.keys(ctrl.errors) : [];
}

方案2：修改errors方法支持null类型 #

如果不想额外定义Getter，可以直接修改errors方法的参数类型，让它支持AbstractControl | null，同时用可选链处理null的情况：

errors(ctrl: AbstractControl | null): string[] {
  // 用可选链?.避免ctrl为null时的报错，代码更安全
  return ctrl?.errors ? Object.keys(ctrl.errors) : [];
}

这样模板里直接传addNewSiteForm.get('number')就不会有类型错误了，还能避免控件不存在时的运行时问题。

方案3：模板中使用类型断言（不推荐） #

如果你只是临时想快速解决问题，可以在模板里给控件做类型断言，但这种方式不够严谨，如果后续表单结构变化导致控件不存在，可能引发运行时错误：

<mat-error>
  <ng-container *ngFor="let error of errors(addNewSiteForm.get('number') as FormControl)">
    {{ errorMessages[error] }}<br />
  </ng-container>
</mat-error>

总结一下：移除类型注解的方式虽然简单，但牺牲了类型安全，更推荐你使用方案1或方案2，既能解决类型错误，又能保留TypeScript的类型校验优势。

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