Angular 15扩展类型化FormGroup遇类型不兼容错误求排查

问题原因 #

报错的核心是你定义的CustomFormControls接口缺少字符串索引签名，Angular的FormGroup类要求其controls属性必须符合{ [key: string]: AbstractControl<any, any> }的类型结构——即支持任意字符串键的索引访问，而你的接口仅声明了明确的name和content字段，无法满足这个类型要求。

修复方案 #

给CustomFormControls接口添加字符串索引签名，确保它与FormGroup的controls类型兼容：

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

export interface CustomFormControls {
  // 添加字符串索引签名，匹配AbstractControl的类型
  [key: string]: AbstractControl<string|null, string|null>;
  name: FormControl<string|null>;
  content: FormControl<string|null>;
}

export class CustomForm extends FormGroup<CustomFormControls> {
    constructor() {
        super({
            name: new FormControl('name'),
            content: new FormControl('content'),
        })
    }
}

替代方案（无需自定义类） #

如果不需要封装自定义FormGroup类，也可以直接在组件中创建带类型的FormGroup实例，写法更简洁：

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

interface CustomFormControls {
  name: FormControl<string|null>;
  content: FormControl<string|null>;
}

// 组件中直接使用
form: FormGroup<CustomFormControls> = new FormGroup({
  name: new FormControl('name'),
  content: new FormControl('content'),
});

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