How to improve Angular 14 Reactive Forms Typings
Angular 14 shipped with some cool new features . Among those features was the long awaited Typed Reactive Forms. However, there are some drawbacks and its not typed to your custom types, it is typed to Record<string, AbstractControl>, which means that you cannot pass it a custom interface to it.
As you can see in the above example you cannot pass a custom entity (User) to a FormGroup, as it is not of type Record<string, AbstractControl>. There are things we can do to type it better and we are going to learn what in this article.
Using a type to wrap the FormGroup generic type
We can reduce the amount of typing code by extracting the FormGroup typings for a user into a custom type.
This works fine, however, this implies having to create a custom type for each FormGroup based on an entity. Also, it implies having to change the UserFormType whenever we change the User interface. This is a solution that is not resilient to change. Not to mention if we have a deep nested FormGroup which uses FormGroups or even FormArrays as nested controls, this would imply creating a type for each of those…
