Angular嵌套FormRecord中动态移除FormControl出现类型匹配错误

问题描述 #

开发Angular应用时，需要在FormRecord中动态添加/移除复选框类型的FormControl。顶层FormRecord的removeControl方法正常工作，但嵌套在FormGroup中的FormRecord调用该方法时出现类型错误。核心代码如下：

private formBuilder = inject(NonNullableFormBuilder);

form = this.formBuilder.record<boolean>({});

nestedForm = this.formBuilder.group({
  field1: [``],
  subRecord: this.formBuilder.record<boolean>({}),
});

// 正常工作
removeRandomFormControls() {
  const record = this.form;
  Object.keys(record.controls).forEach((key) => {
    if (Math.random() > 0.5) {
      return;
    }
    record.removeControl(key, { emitEvent: false });
  });
}

// 报错的嵌套版本
removeRandomNestedFormControls() {
  const subRecord = this.nestedForm.controls.subRecord;
  Object.keys(subRecord.controls).forEach((key) => {
    if (Math.random() > 0.5) {
      return;
    }
    // 此处报错
    subRecord.removeControl(key, { emitEvent: false });
  });
}

报错信息：

No overload matches this call.
Overload 1 of 2, '(this: FormGroup<{ [key: string]: AbstractControl<any, any>; }>, name: string, options?: { emitEvent?: boolean | undefined; } | undefined): void', gave the following error.
The 'this' context of type 'FormGroup<{ [key: string]: FormControl<boolean>; }>' is not assignable to method's 'this' of type 'FormGroup<{ [key: string]: AbstractControl<any, any>; }>'.
Type '{ [key: string]: AbstractControl<any, any>; }' is not assignable to type '{ [key: string]: FormControl<boolean>; }'.
'string' index signatures are incompatible.
Type 'AbstractControl<any, any>' is missing the following properties from type 'FormControl<boolean>': defaultValue, registerOnChange, registerOnDisabledChange
Overload 2 of 2, '(name: never, options?: { emitEvent?: boolean | undefined; } | undefined): void', gave the following error.
Argument of type 'string' is not assignable to parameter of type 'never'.

原因分析 #

这是Angular Forms类型推断的局限性导致的：当使用FormBuilder.group创建包含FormRecord的嵌套表单时，TypeScript会将嵌套的FormRecord推断为FormGroup<{ [key: string]: FormControl<boolean>; }>，而非原本的FormRecord<FormControl<boolean>>。FormGroup的removeControl方法要求传入的键是预定义的字面量类型，而FormRecord允许动态字符串键，因此出现类型不兼容的错误。

正确实现方式 #

方式1：显式指定嵌套表单的类型 #

通过手动定义nestedForm的类型，明确subRecord为FormRecord类型：

nestedForm: FormGroup<{
  field1: FormControl<string>;
  subRecord: FormRecord<FormControl<boolean>>;
}> = this.formBuilder.group({
  field1: [``],
  subRecord: this.formBuilder.record<boolean>({}),
});

方式2：类型断言 #

在获取subRecord时，通过类型断言告诉TypeScript它的真实类型：

removeRandomNestedFormControls() {
  const subRecord = this.nestedForm.controls.subRecord as FormRecord<FormControl<boolean>>;
  Object.keys(subRecord.controls).forEach((key) => {
    if (Math.random() > 0.5) {
      return;
    }
    subRecord.removeControl(key, { emitEvent: false });
  });
}

方式3：使用FormBuilder的类型参数 #

调用FormBuilder.group时传入泛型参数，明确嵌套控件的类型：

nestedForm = this.formBuilder.group<{
  field1: FormControl<string>;
  subRecord: FormRecord<FormControl<boolean>>;
}>({
  field1: [``],
  subRecord: this.formBuilder.record<boolean>({}),
});

以上三种方式都能让TypeScript正确识别嵌套控件的FormRecord类型，从而正常调用removeControl方法。

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