Home > database >  Array of custom forms with FormGroup as parent
Array of custom forms with FormGroup as parent

Time:05-03

I have a use-case where I'm creating several custom formgroup classes that have FormGroup as their parent class like so:

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

What I'm trying to do is put this in an array who's type is FormGroup, i.e.:

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

When I do this, I get the following error:

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

I've found a few questions similar to my issues like: Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more or TypeScript type of array with common Classes that inherit from same Class but none that are similar enough to my issue.

In short, what I'm asking is: Is there a way to type an array where objects in that array have the same parent class?

I do understand that I could theoretically just define all the methods for FormGroup in CustomFormGroup1 and CustomFormGroup2, but I'm hoping there's a way I can get the desired result without having to do that.

I have also tried defining it like this:

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

I get the same warning mentioned above.

Thank you very much in advance for any insight.

Thank you in advance.

CodePudding user response:

To have types that are subclass of FormGroup (or FormGroup itself) in the array you can use something like:

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