How to make your Angular Reactive Forms nonNullable

Angular v14 introduces many new features that promise to enhance the development experience and maintainability of your projects.

Many of these pertain to Reactive Forms, which from now on will be able to benefit from the greatest advantage offered by Typescript: typing.

The introduction of this functionality has prompted some reflections and requirements that the vague any type — scattered throughout the original Reactive Form code — has kept hidden for years.

Let’s start with the simplest possible case…

To understand what I’m talking about, let’s start with this example:

const name = new FormControl('Hello');

name.setValue('Ciao');
console.log(name.value); // Ciao

name.reset();
console.log(name.value); // null

After creating a FormControl with initial value 'Hello’, invoking the reset() function deletes its value, setting it to null.

The presence of the reset() function therefore made it necessary to ensure that our FormControl was typed as follows:

const name = new FormControl<string | null>('Hello');

How do we remove that null?

To achieve this, the nonNullable option was introduced.

Thanks to this option, you can ensure that the reset() function does not delete the value, but resets it to the initial value, in our case 'Hello’:

const name = new FormControl('Hello', { nonNullable: true });

name.setValue('Ciao');
console.log(name.value); // Ciao

name.reset();
console.log(name.value); // Hello

By doing so, given that the reset() function no longer resets the value to null, our FormControl can therefore be typed in the following way:

const name: FormControl<string> = new FormControl('Hello', { nonNullable: true });

Can I use it with FormBuilders? Absolutely!

This option is now also supported as a FormBuilder parameter:

const fb = new FormBuilder();

const myForm = fb.group({
  name: fb.control(''),
  collection: fb.array([]),
});

But it doesn’t stop there, you can actually streamline your code using the new NonNullableFormBuilder, which incorporates this option:

constructor(nnfb: NonNullableFormBuilder) {

  const myForm = nnfb.group({
    name: nnfb.control(''),
    collection: nnfb.array([]),
  });

}

As you have seen, this new option was created in order to resolve some aspects that made typing a little unnatural — the null case for example — but which in fact enhances Reactive Forms and increases the use cases that we can address without the need to apply particular strategies.

Want to know more?

Read my dedicated article what’s new with Reactive Forms in Angular v14 and let me know what you think:

Guide to Typed Reactive Forms in Angular

Thanks for reading so far 🙏

I’d like to have your feedback so please leave a comment, clap or follow. 👏

Then, if you really liked it share it among your community, tech bros and whoever you want. And don’t forget to follow me on LinkedIn. 👋😁