Let's Develop An Angular Application - Validation In Reactive Forms

Introduction

 

In my previous article, I have explained about Angular reactive forms. In this article, we will learn about validation in reactive forms. Here, I am going to use the same form which we have created in my previous article.

 

We have created the registration form with basic input controls using the Angular reactive form approach.

 

To read my previous article about Angular reactive forms, please click the below link.

• Introduction to Reactive Forms

We have created the form model using the form control and form group.

 

Please refer  to the screenshot below.

 

 

Inside the FormControl() constructor , we can pass a few parameters.

 

The first parameter is used to pass the default values. The second parameter is used to pass the validators.

 

We can use the inbuilt validators and custom validators for our input controls.

 

Validation in Reactive Forms

 

One of the advantage of reactive form is that we can define the validation in our component.

 

Validators are just passed in as the second parameters of the FormControl.

 

The first element is the default value for the FormControl.

 

To use the angular validators, we need to import the Validators from ‘@angular/forms’.

 

 

Required and minlength Validators

 

Let’s try the required and minlength validators first.

 

We can add the required validator to the form control by adding the statement Validators.required as the second parameters of the form control as the below screenshot.

 

 

Check the result in the browser.

 

Open the developer console and check the validation classes applied to the name input field.

 

 

As we can see, ‘ng-invalid’ validation class is applied to the name field.

 

Let’s type some name in input field.

 

Once we start typing letters, the ‘ng-invalid’ class will be removed and ‘ng-valid’ class will be added.

 

Please refer to the screenshot below.

 

 

The next problem is that the form will allow us to submit the form even if the form control is invalid.

 

The form will become valid only if all of the formcontrols are valid.

 

We can disable the Register button as long as the form is invalid.

 

Please refer to the screenshot below.

 

 

Here we are using the disabled property to disable the register button.

 

The ’userForm’ is the name of the formGroup.

 

 

Check the result in browser and the Register button will be disabled as long as the form in invalid.

 

The next issue is, the form is not showing any validation errors.

 

Let‘s fix the issue.

 

We have added the ‘required’ validator for name field.

 

So, we need to display the validation message if the user doesn’t provide any value for the name field.

 

I am using the ‘em’ tag to display the validation message.

 

We can use the ngIf directive to show/hide the validation message by checking the value of the ‘invalid’ property.

 

Please refer to the screenshot below

 

 

I’ve used simple style properties to make the validation message in red.

 

Check the results in browser. The form will be look like the below screenshot.

 

 

The validation message is displaying before the user has started typing. We should provide some time for the user to enter the values.

 

For this, we can use the ‘touched’ property of the name control.

 

Please refer to the code snippet below.

 

 

Now, the validation message will show only if the user touches the name input control and leaves the field without providing any name.

 

Similarly, we can use the minLength() validator with the form controls.

 

The syntax is - Validators.minLength(length:number)

 

Eg : Validators.minLength(3)

 

Using Multiple Validators

 

We can add multiple validators to the form controls.

 

An array of validators can be passed as the second parameter for the FormControl constructor.

 

Let’s add the pattern validator for the name control. We can restrict the user to include digits in name using pattern validator.

 

Please refer to the screenshot below.

 

 

Save the file and check the validation in browser.

 

If we type any digits in name input field, the validation message will be displayed.

 

But the problem is that  the validation message is still the same for both required and pattern validator.

 

Displaying custom validation Messages

 

We can display different validation messages for each validators.

 

Let’s add one more em tag for displaying validation message for pattern validator.

 

Please refer to the screenshot below.

 

 

Here we are using the value of the required and pattern properties to check the type of validation issue.

 

Save the file and check the User register form in browser.

 

Please refer to the screenshot below.

 

 

Now the User Registration form will display the correct validation messages based on the type of validation.

Conclusion

 

In this article, we have learned about Angular Reactive Forms validations and how to use multiple validators in form controls.

 

In my next article I will explain about the creation of Angular custom validators.

 

Happy Learning