Dhananjay Kumar

Learn full article on the Infragistics blog

In this blog post, we will learn to create custom validators in Angular Reactive Forms. If you are new to reactive forms, learn how to create your first Angular reactive form here.

Let’s say we have a login form as shown in the listing below. Currently, the form controls do not have any validations attached to it.

Here, we are using FormGroup to create a reactive form. On the component template, you can attach loginForm as shown in the code listing below. Using property binding, the formGroup property of the HTML form element is set to loginForm and the formControlName value of these controls are set to the individual FormControl property of FormGroup.

This will give you a reactive form in your application:

Using Validators

Angular provides us many useful validators, including required, minLength, maxLength, and pattern. These validators are part of the Validators class, which comes with the @angular/forms package.

Let’s assume you want to add a required validation to the email control and a maxLength validation to the password control. Here’s how you do that:

To work with Validators, make sure to import them in the component class:

On the template, you can use validators to show or hide an error message. Essentially, you are reading the formControl using the get() method and checking whether it has an error or not using the hasError() method. You are also checking whether the formControl is touched or not using the touched property.

If the user does not enter an email, then the reactive form will show an error as follows:

Custom Validator

Let us say you want the age range to be from 18 to 45. Angular does not provide us range validation; therefore, we will have to write a custom validator for this.

In Angular, creating a custom validator is as simple as creating another function. The only thing you need to keep in mind is that it takes one input parameter of type AbstractControl and it returns an object of key value pair if the validation fails.

Let’s create a custom validator called ageRangeValidator, where the user should able to enter an age only if it’s in a given range.

The type of the first parameter is AbstractControl because it is a base class of FormControl, FormArray, and FormGroup, and it allows you to read the value of the control passed to the custom validator function. The custom validator returns either of the following:

1. If the validation fails, it returns an object, which contains a key value pair. Key is the name of the error and the value is always Boolean true.

2. If the validation does not fail, it returns null.

Learn full article on the Infragistics blog