Angular：如何在ngFor中配置FormControl并解决类型不匹配错误

下面提供三种不使用any类型的可行方案：

方案一：非空断言+类型断言（前提是确保控件存在） #

如果能保证在构建表单时，每个item.id都对应一个FormControl，可以直接在模板中使用非空断言!和类型断言as FormControl来明确类型：

<mat-slide-toggle 
  *ngFor="let item of notificationsItem"
  [formControl]="notificationForm.get(item.id)! as FormControl"
>
  {{ item.label }}
</mat-slide-toggle>

• !：告诉TypeScript，notificationForm.get(item.id)不会返回null
• as FormControl：明确指定返回的控件类型为FormControl

方案二：组件类中添加安全获取控件的方法 #

在组件类中封装一个方法，专门获取对应id的FormControl，并做类型校验，避免返回null或不匹配的控件类型：

组件类代码 #

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

// ...

getNotificationControl(id: string): FormControl | undefined {
  const control = this.notificationForm.get(id);
  // 校验控件是否为FormControl类型
  return control instanceof FormControl ? control : undefined;
}

模板代码 #

<mat-slide-toggle 
  *ngFor="let item of notificationsItem"
  [formControl]="getNotificationControl(item.id)"
  *ngIf="getNotificationControl(item.id)"
>
  {{ item.label }}
</mat-slide-toggle>

• 通过*ngIf确保只有当控件存在且类型正确时才渲染组件，避免绑定null或无效类型

方案三：强类型FormGroup（最安全的方案） #

提前定义表单的类型，让TypeScript明确知道每个表单控件的类型，从根源上避免类型不匹配问题：

组件类代码 #

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

// 定义表单类型，指定每个键对应FormControl<boolean>（因为mat-slide-toggle绑定的是布尔值）
interface NotificationForm {
  [key: string]: FormControl<boolean>;
}

// 构建强类型的FormGroup
notificationForm = new FormGroup<NotificationForm>(
  this.notificationsItem.reduce((formControls, item) => {
    formControls[item.id] = new FormControl(false); // 初始值根据需求设置
    return formControls;
  }, {} as NotificationForm)
);

模板代码 #

<mat-slide-toggle 
  *ngFor="let item of notificationsItem"
  [formControl]="notificationForm.controls[item.id]"
>
  {{ item.label }}
</mat-slide-toggle>

• 通过强类型定义，TypeScript能直接推断出notificationForm.controls[item.id]是FormControl<boolean>类型，无需额外断言，类型安全性最高

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