Angular Reactive Form Control Implicit Type Inference and Reset Semantics

Image by Nimrod Oren from Pixabay

Scenario

We would like IDE error linting in case we try to set an incorrect type value on a form control. This is a feature of the latest version of Angular.

We also want controls to reset to their constructor assigned initialization values .

Approach

Initialize the control with a string value.

const c = new FormControl('');

Set the value of the control to a non string value.

c.setValue(2);

Angular now lints the code with the following error message.

Error in src/app/app.component.ts (16:16)
Argument of type 'number' is not assignable to parameter of type 'string'.

Note that we could have applied the type of the control generically like this.

const c = new FormControl<string>('');

If we call reset on c .

c.reset();

The value of c is set to null. That’s because the type of c has been inferred to <string | null>. If we don’t want this we can turn off nullability.

const d = new FormControl('start', { nonNullable: true });

If we d.reset() the value assigned to d will be the string start .

Demo