Angular Custom Validation in a Nutshell

The history of validation

Validation in online forms is indispensable. Users are prone to enter data in invalid formats. In addition, your forms can also become vulnerable to hackers, who can easily enter garbage data into your database. Although, there were lots of ways to add validation, AngularJS came up with very simple approach. It simplified validation by adding validation triggers inside HTML. But it has its own cons when the use case starts to become very specific. Creating angular custom validation was a pain as it required a directive and lots of ‘if’ statements to correctly set the element’s validity.

Angular custom validation

As a result, the Angular team addressed this issue with a very straightforward approach in their latest version. The whole framework was redesigned from scratch with the Typescript language. The new approach brought mainly two ways to add validation, ‘Template‘ & ‘Reactive‘ validation. If you want to learn about these validation, please follow this tutorial

Angular custom validation

For the purpose of this  article, we will create an Angular custom validation to check if the user’s input contains the word ‘codiodes’ in it. I assume that you’ve already setup your Angular project.

First of all, we will import ReactiveFormsModule in our app module.

Now we will add the custom validation logic in a new typescript class called login.validator.ts.

The above snippet is very straightforward, it’s simply checking the presence of the word ‘codiodes’ in the user’s input. However, the interesting stuff lies in what we return from the function. If we return a null object, the validation will succeed and if we return a object, Anuglar will consider it as a validation failure. One thing to note here is the key of the object we are returning, because we will use that key inside our html to show validation message.

Next, we will setup the validation in our Component.

In the above snippet, we have imported FormGroup, FormBuilder & Validators modules. The FormGroup aggregates the values of each child FormControl into one object, with each control name as the key. It calculates its status by reducing the statuses of its children. For example, if one of the controls in a group is invalid, the entire group becomes invalid. And the FormBuilder is essentially syntactic sugar that shortens the new FormGroup(), new FormControl(), and new FormArray() boilerplate that can build up in larger forms.
You could see that we have added our validation function in the array. You can add multiple built-in validation functions or the custom ones inside that array.

Finally, we assemble our HTML file to show appropriate validation messages.

We have added the formGroup attribute to link it with the FormGroup instance in our component. However, the name of formGroup attribute should be similar to FormGroup instance inside Component.

Now, let’s test our application.

Angular custom validation

I hope this article will help you to learn angular custom validation. Please leave a comment in the below comment box in case of any query.

  • alex immanuel

    Super …Nice one ….Explained in ease ….