以 FormGroup 为父级的自定义表单数组

Question

我有一个用例，我正在创建几个自定义表单组 classes，它们将 FormGroup 作为其父 class，如下所示：

export class CustomFormGroup1 extends FormGroup {
  //a bunch of custom properties for this FormGroup
  
  constructor() {
    super(
      {
      // initializing CustomFormGroup1's form properties
      }
    );
  }
}

export class CustomFormGroup2 extends FormGroup {
  //a bunch of custom properties for this FormGroup
  
  constructor() {
    super(
      {
      // initializing CustomFormGroup2's form properties
      }
    );
  }
}

// etc with a couple more Custom Forms

我想做的是将其放入类型为 FormGroup 的数组中，即：

formList: FormGroup[] = [CustomFormGroup1, CustomFormGroup2, ...etc]

当我这样做时，出现以下错误：

TS2740: Type 'typeof ResourceTypeForm' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 57 more.

我发现了一些与我遇到的问题类似的问题，例如： Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more 要么 TypeScript type of array with common Classes that inherit from same Class 但是 none 与我的问题非常相似。

简而言之，我要问的是：有没有一种方法可以键入一个数组，其中该数组中的对象具有相同的父对象 class？

我知道理论上我可以在 CustomFormGroup1 和 CustomFormGroup2 中定义 FormGroup 的所有方法，但我希望有一种方法可以获得所需的结果不必那样做。

我也试过这样定义它：

formArray: (FormGroup|CustomFormGroup1|CustomFormGroup2|..etc)[] = [CustomFormGroup1, CustomFormGroup2, ...etc];

我收到与上述相同的警告。

非常感谢您的任何见解。

提前致谢。

Answer 1

要在数组中拥有作为 FormGroup（或 FormGroup 本身）子类的类型，您可以使用类似的东西：

formList: (typeof FormGroup)[] = [CustomFormGroup1, CustomFormGroup2, ...etc]

以 FormGroup 为父级的自定义表单数组

Array of custom forms with FormGroup as parent

typescript

angular

angular-reactive-forms