#StackBounty: #typescript #angular-2+ Angular 5 Forms – Extending Form Control

Bounty: 100

Currently taking a first pass at Angular Forms with some colleagues and I’m noticing 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 concerning 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 not totally certain that these classes were meant to be extended…


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.