I’m looking to refactor a large set of components in my Angular project to have strongly typed FormGroups, FormArrays, and FormControls.
I’m just looking for a good way to implement strongly typed reactive forms. Could anyone provide suggestions/recommendations from their own experiences?
To clarify, by strongly typed I mean currently when I create a FormGroup or FormArray I have no way to specify the structure of the actual form inside it. When I pass this form around to various components in my app, I then feel I am making it more difficult to maintain.
The most elegant solution is leveraging TypeScript declaration files (
*.d.ts) to introduce generic interfaces extending the standard form classes like
It was suggested by Daniele Morosinotto in March this year and there are talks now to include it in Angular 9.
Adopting the solution is straightforward:
TypedForms.d.tsfrom this gist and save it as
src/typings.d.tsin your project (Angular 6+ already knows how to use this file).
- Start using the new types (
FormControlTyped<T>, etc.) whenever you need a strong type validation (see examples in that gist or stackblitz).
For more information, check out a blog post analysing available solutions for strongly typed forms.