Angular 14中如何扩展FormGroup并添加自定义属性？

问题原因 #

你定义的MyForm<T>接口继承自FormGroup并新增了isSaving属性，但直接将FormBuilder创建的FormGroup实例断言为MyForm<T>时，TypeScript会报错——因为原生FormGroup实例并不包含isSaving属性，类型不兼容。

正确实现方式 #

1. 修正MyForm<T>接口的类型定义 #

首先修正controls的类型，确保每个控件对应T的属性类型：

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

export interface MyForm<T> extends FormGroup {
  isSaving: boolean;
  // 确保value是必填的T类型
  value: Required<T>;
  // 每个控件对应T属性的具体类型
  controls: { [key in keyof Required<T>]: FormControl<Required<T>[key]> };
  setValue(
    value: Required<T>,
    options?: {
      onlySelf?: boolean;
      emitEvent?: boolean;
    }
  ): void;
  reset(
    value: T,
    options?: {
      onlySelf?: boolean;
      emitEvent?: boolean;
    }
  ): void;
}

2. 修改createMyForm函数，添加自定义属性后再断言类型 #

在创建表单实例后，先为其添加isSaving属性，再通过unknown中转进行类型断言（避免直接断言的类型不兼容错误）：

import { FormBuilder, AbstractControlOptions, ValidatorFn, FormControlOptions, AsyncValidatorFn } from '@angular/forms';
import { MyForm } from './your-interface-path';

export const createMyForm = <T>({
  fb,
  controls,
  options
}: {
  fb: FormBuilder;
  controls: {
    [key in keyof T]: [
      formState: T[key],
      validatorOrOpts?: ValidatorFn | ValidatorFn[] | FormControlOptions | null,
      asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null
    ];
  };
  options?: AbstractControlOptions | null;
}) => {
  const form = fb.group(controls, options);
  // 先转为unknown中转，再转为MyForm<T>，避免类型直接转换错误
  const myForm = form as unknown as MyForm<T>;
  myForm.isSaving = false; // 初始化自定义属性
  return myForm;
};

3. 组件中使用方式保持不变 #

// 假设User接口定义如下
interface User {
  username?: string;
  password?: string;
}

// 组件内使用
this.myForm = createMyForm<User>({
  fb: this.fb,
  controls: {
    username: ['', Validators.required],
    password: ['', Validators.required]
  },
  options: {}
});

// 之后可以直接访问和修改isSaving属性
this.myForm.isSaving = true;

核心逻辑说明 #

• 通过unknown中转类型断言，绕过TypeScript对直接跨类型转换的严格检查（因为FormGroup和MyForm<T>存在部分类型重叠，但缺少自定义属性）
• 手动为实例添加isSaving属性，确保运行时实例拥有该属性，同时满足类型定义的要求

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