Is it possible to extend typed reactive form definitions to support a 'generic' FormArray?

ONLINECAST

2 min read

·

03-09-2024

18

0

Share

Extending Typed Reactive Form Definitions for Generic FormArrays in Angular

This article explores how to create flexible and reusable FormArrays in Angular's reactive forms, specifically by addressing the challenge of defining a generic FormArray that can accommodate different child form types.

The Problem:

When working with Angular's reactive forms, you might want to create a generic FormArray that can contain different types of child forms. However, directly using different child form types within the same FormArray can lead to TypeScript type errors, as illustrated in the Stack Overflow question here.

The Solution:

The issue arises from TypeScript's type system and the way it handles inheritance. To achieve the desired flexibility, we need to leverage the power of generics and unions.

Here's a refined approach:

1. Create a Base Interface:

   export interface CommonFormDefinition {
       commonField: FormControl<string>;
       commonField2: FormControl<string>;
   }
   

2. Define Child Interfaces:

   export interface ChildFormAlpha extends CommonFormDefinition {
       alphaField: FormControl<string>;
   }
   
   export interface ChildFormBeta extends CommonFormDefinition {
       betaField: FormControl<string>;
   }
   

3. Use a Union Type for the FormArray:

   export type ChildFormTypes = ChildFormAlpha | ChildFormBeta;
   

4. Define the FormArray Type:

   export interface FormArrayDefinition {
       listOfForms: FormArray<FormGroup<ChildFormTypes>>;
   }
   

5. Create Form Groups:

   const form = new FormGroup<FormArrayDefinition>({
       listOfForms: new FormArray([
           new FormGroup<ChildFormAlpha>({ 
               commonField: new FormControl('initial common value'),
               commonField2: new FormControl('initial common value'),
               alphaField: new FormControl('initial alpha value'),
           }),
           new FormGroup<ChildFormBeta>({ 
               commonField: new FormControl('initial common value'),
               commonField2: new FormControl('initial common value'),
               betaField: new FormControl('initial beta value'),
           }),
       ]) 
   });
   

Explanation:

• Union Type: ChildFormTypes represents a union of all possible child form types, allowing the FormArray to accept any of them.
• Generic Type Parameter: The FormGroup within the FormArray uses the ChildFormTypes union as its generic type parameter.
• Type Compatibility: TypeScript now understands that any FormGroup with a type that extends CommonFormDefinition (including ChildFormAlpha and ChildFormBeta) is assignable to FormGroup<ChildFormTypes>, ensuring type safety.

Additional Considerations:

• Validation: You can define validation rules for each child form type and use them accordingly within the FormGroup creation.
• Dynamic Forms: If you need to dynamically add different types of child forms to the FormArray, you can use the FormArray.push method while ensuring that the added FormGroup has a type that extends CommonFormDefinition.

In Conclusion:

This approach leverages TypeScript's type system to create flexible and type-safe FormArrays in Angular reactive forms. The use of unions and generics ensures that the FormArray can accept different child form types while maintaining type safety. This flexibility empowers you to create dynamic and robust forms in your Angular applications.