Custom Form Validators in Angular

Almost every application requires forms. Thankfully, Angular, unlike other frameworks, provides built-in validators which are very helpful and could cover most cases.

In this article, we first take a look at some built-in Angular validators and then learn how to implement our own custom validator.

Angular Built-In Validators

Here are some of the useful built-in validators provided by Angular:

• required: requires having a non-empty value
• pattern: requires a value matching a provided regex
• minlength and maxlength: requires a form control to have a value of a minimum/maximum length.

We can use these validators on reactive forms as well as on corresponding directives.

In order to use validators on template-driven forms don’t forget to import Angular’s FormsModule to your application module first.

For instance, in order to validate the required field with minimal length 4 on template-driven forms, you need just add required and minlength="4" attributes.

To use validators in a reactive form, firstly, we need to import ReactiveFormsModule into the module.

And then we can apply validators in our form using FormControl and FormGroup:

Implementing a Custom Validator

However, in some cases, we need to create custom validators.

Validators are just functions that take as an input a FormControl and return null when it is valid or an error if it is not.

For the article’s sake, let’s imagine a situation when we need to validate a date. The date should be later than today. This case could be handy, for instance, for tickets or hotel bookings.

All we need to do is create a function that takes a FormControl and check if its value matches our condition or not.

The date input field is now validated. If it’s earlier than today, our validator will return an error object with the key dateNotValid.

To use our validator in a model-driven form we pass our function into FormControl:

If we want to combine multiple validators on a single control, just insert the required validators as an array, like so:

Let’s add a helpful message to a user if our validator fails:

Multi-Field Custom Validators

Another case is when we need to create a custom validator that is dependent on a value of a different field of the form. The following scenario requires us to compare at least two fields.

When we validate multiple fields, we need to be sure that our validation logic runs for each of those fields. Therefore we attach the validator to the FormGroup instead of FormControl.

Using the FormGroup, we can easily access any value of the form and compare multiple values.

Let’s create a validator function that compares two dates. For instance, the end date must be greater than the start date.

We use the get method in order to get the value of both fields.

If our condition is fulfilled then return the dateRangeError, otherwise — null.

That’s it! Pretty much like we did with the previous validator function.

Now we need to attach validateDates validator to FormGroup as a second argument as shown below.

Conclusion

In this article, we went through some built-in validators and were able to create a custom Angular validator and a multi-field custom validator. In the end, a custom validator is just a function that returns either an error object or null.

You can find more information about built-in validators and how to create custom validators in the official documentation.

Your heart beats for developing exciting SaaS products? We are always looking for motivated new team members. Take a look at our vacancies: https://eqs-group.personio.de/recruiting/positions