Angular 14 ships with typed reactive forms, and it's just great. Type inference, backward compatibility, fine-tuning options, and user-defined type definitions - it's all there. It's been a long wait, but it was worth it!

<!--more-->
<h2>Type inference and backward compatibility</h2>
Truth to tell, I noticed the feature when I ran into strange bugs after updating to Angular 14. As it turns out, Angular determines the type of the form controls by their default values:

[sourcecode TypeScript]
const name = new FormControl(''); // --> string | null
const truth = new FormControl(true); // --> boolean | null
[/sourcecode]

Awesome! However, after updating to Angular 14, you'll probably have to fix zillions of type errors. In the meantime, you can use <code>UntypedFormControl</code> instead of <code>FormControl</code>.

<h2>Fine-tuning</h2>
The inferred type <code>string | null</code> puzzled me at first. You can get rid of it by adding an option:

[sourcecode TypeScript]
const name = new FormControl('', { nonNullable: true }); // --> string
[/sourcecode]

This guarantees the form control is never null. The null value is confusing because form controls reflect the user input, and users never can input null values. Even if they don't input anything, it's still an empty string. However, as <a href="https://netbasal.com/typed-reactive-forms-in-angular-no-longer-a-type-dream-bf6982b0af28">Netanal Basal explains</a>, <code>FormControl.reset()</code> sets the value to null unless you add the <code>nonNullable</code> attribute.

<h2>User-defined typings</h2>
<code>FormControl</code> has become a generic type. So you can override the default by passing a type parameter:

[sourcecode TypeScript]
const salary = new FormControl<number>(); // --> number | null
[/sourcecode]

This also works for entire <code>FormGroups</code>, as <a href="https://netbasal.com/typed-reactive-forms-in-angular-no-longer-a-type-dream-bf6982b0af28">Netanal Basal reports:</a>:

[sourcecode TypeScript]
// please read Netanals blog for an
// explanation of this type magic :)
export type ControlsOf<T extends Record<string, any>> = {
  [K in keyof T]: T[K] extends Record<any, any>
  ? FormGroup<ControlsOf<T[K]>>
  : FormControl<T[K]>;
};

interface Employee {
  name: string;
  salary: number;
}
const employeeForm = new FormGroup<ControlsOf<Employee>>({
  name: new FormControl(),
  salary: new FormControl()
})
[/sourcecode]

<h2>Wrapping it up</h2>
In a nutshell, Angular 14 finally ships with simple and valuable typed reactive forms. You'll love it!

This article is merely a litte teaser. Please read the full story at <a href="https://netbasal.com/typed-reactive-forms-in-angular-no-longer-a-type-dream-bf6982b0af28">Netanal Basal's</a> blog.