Angular (15) 无法扩展类型化的 FormGroup

Question

我正在摆弄类型化的 FormGroup。

我创建了以下内容:

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

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

然后我尝试在组件中使用它:

form: CustomForm = new CustomForm()

在我的模板中:

<form class="Form" [formGroup]="form">

但是，我收到以下错误:

Type 'CustomForm' is not assignable to type 'FormGroup<any>'.
  Types of property 'controls' are incompatible.
    Type 'CustomFormControls' is not assignable to type '{ [key: string]: AbstractControl<any, any>; }'.
      Index signature for type 'string' is missing in type 'CustomFormControls'.
         <form class="Form" [formGroup]="form">

我不确定我在那里做错了什么。

Answer 1

尝试为字符串键添加索引签名

export interface CustomFormControls {
  name: FormControl<string|null>
  content: FormControl<string|null>
  [key: string]: AbstractControl<any, any>;
}