Angular — Typed Reactive Forms
After upgrading to Angular 10, if using the option "strictTemplates": true you’ll likely run into issues with usage of directives like [FormControl]:
Where ctrl is a control in a FormGroup. We know ctrl is a FormControl, but due to the typing of FormGroup, Angular does not:
If only there were a way to tell Angular what to expect in a FormGroup's controls and value… Good news! There is! And it’s only about 30 lines of code:
In order to implement this, you’d need to replace any occurrence of new FormGroup with EnhancedFormGroup.create, but it should be a relatively easy refactor. If you’re using the FormBuilder or another concept, it may be a little bit more involved, but I believe a similar concept could be implemented.
In the example we’re setting the value of EnhancedFormControl's value to be any by default, which allows you to leave the type off as you would be doing today. Optionally, you can then specify the type of value you’d expect in the control (new EnhancedFormControl<number>() for example)
