Angular 5 Forms - Extending Form Control

Question

I am taking a first pass at Angular Forms with some colleagues and noticed an interesting design pattern implemented by a coworker where the FormControl is being extended to allow for additional properties including flags like readonly, showcancel and a few other custom properties.

The controls are then iterated over in the form template to then render each input. This is a big concern to me as we are extending the base Angular classes that could change with updates to the framework.

Here is an example of what I am talking about:

export class FormGroupModel extends FormGroup {
    readOnly: boolean;
    showCancel: boolean;
    controls: { [key: string]: FormControlModel | FormGroupModel };

    get(controlName: string): FormControlModel {
        return <FormControlModel> super.get(controlName);
    }
}

export class FormControlModel extends FormControl {
    readOnly: boolean;
    showCancel: boolean;
}

Is there anything else that we should keep in mind when using this strategy? I'm not totally certain that these classes were meant to be extended...

Answer 1

1. Update the signature of the module to include your new properties. This will let the compiler know about your new properties and will prevent it from throwing errors in the HTML template or in the component.ts file.

   declare module '@angular/forms' {
     interface AbstractControl {
       focused: boolean;
     }
   }
   

   I added AbstractControl because that is the base class that FormControl is built on and derives its properties from.

2. Add your new properties by extending the class, passing through (...args) for both the constructor(...args) and super(...args) calls.

   export class FormControlCustom extends FormControl {
   
     public focused: boolean = false;
   
     constructor(...args) {
       super(...args);
     }
   
   }
   

3. Typecast your FormControl. Now all your FormControlCustom elements will have the new properties defined in the class which extends FormControl by default.

   sampleForm = new FormGroup({
       property: new FormControlCustom('', Validators.required)
   });
   

I tested this and it is working perfectly in Angular 9.