Angular Reactive forms in deep

After developing projects for more than a year using React in many of them, moving to Angular 8.x sometimes feels like a change of paradigm. In large scale apps, Redux and Redux forms are not a silver bullet for applications with high-complexity forms. Angular reactive forms adds a level of abstraction that I have found quite interesting for small and medium apps, without having the global state-management boilerplate.

Create a basic form

Let’s start with the basics. In order to create a form, you need the FormBuilder provided by your constructor to create an attribute of type FormGroup.

As an example, we will create a form to type in the student data, so we will have something like a Student (defined as a model) and the form will have the following structure:

Let’s add some validations

You can add some validations as a parameter:

In order to access to that error in the HTML you can ask for:

This is the available list of native validations. If you want to concatenate more than one validation, you should do it in this way:

Something can be refactored

After adding errors checks to all formControls you should have something like this:

A way to abstract this logic is to create a custom input (ControlValueAccessor):

By doing this, you can now have only the inputs without having to repeat all the error logic.

Some inputs may need format

One feature I have always loved from Redux form is the possibility of creating normalizers that prevent the user from inserting unwanted values. Also, it formats for free the value the user sets to a friendly display.

To achieve this, there’s a library called ngx-mask that creates a directive called mask in which you define the format the input must have. In addition, you can create a custom mask for example:

Form Arrays

Everything has gone well so far. Now, we need to create many students in the same view. So, what we have to do is to change our FormGroup to a FormArray.

This type of objects can have an array of FormGroup or FormControl as a parameter. So we are going to push our student form to the new students FormArray.

Manipulating form arrays

Some of the most common actions we can do to the form array are:

• Add a new FormGroup.
• Delete one of the FormGroup objects.
• Delete all the FormGroup objects.

The methods to do so are: push(), removeAt() and clean() respectively.

More validations are missing

Let’s suppose that ID’s should always end with an even number. This is a thing you can do with a mask. However, the designer told us that, for this case, the user should see a text explaining why the input is invalid.

Now we will create a validator function with this logic:

And attach the validator to the FormControl like this:

Cross form group validations

We are forgetting something important. Each student should have a unique ID, so we need to add another validator. Here there are two ways:

1. Add the validator to the whole FormArray and display the error at the bottom/top of the site (UX friendlier way could be creating a toast/alert showing the error).

2. Attach the validator to each FormControl and throw an error to the focused ID input:

Both options are valid depending on how the UX is defined by the designer and the client.

Rounding up

I hope this walkthrough over some of the interesting features of Reactive Forms will help you to develop great things.

We know there is always room for improvement. Feel free to leave a comment with your feedback!