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
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.