Validating reactive forms with default and custom form field validators in Angular

11,861 reads

When presenting forms to your users it’s considered very user friendly to give them immediate feedback on what they type is actually correct. Besides that it could also limit the amount of requests to server as you would be able to catch 99% of the errors before submitting your form the server.

reactions

Photo by Simon Matzinger on Unsplash

When using reactive forms Angular offers only a hand full of very generic validators. The default form field validators are:

reactions

min: the value should be higher than a certain number.

the value should be higher than a certain number. max: the value should be lower than a certain number.

the value should be lower than a certain number. required: the value cannot be empty

the value cannot be empty requiredTrue: the value must be true

the value must be true email: the value should be an email

the value should be an email minLength: The value should contain a minimum amount of characters

The value should contain a minimum amount of characters maxLength: The value should contain a maximum amount of characters

Chances are likely that the above validators will not be able to match the requirements of your server. Therefore you cannot give the user the feedback they would like get and help them submit a correct form. For this you are going to need custom form field validators.

reactions

Creating a custom form field validator

A form field validator is a function that takes your form control — the input field — and validates the value of that form control against a certain condition. This function either returns nothing when everything is ok or an object stating what went wrong.

reactions

A very common use case of a custom validator is to check wether the form matches the sanitization rules of the server, this means the validator checks if the characters your user puts into your form are allowed. Let’s create this form validator now.

reactions

Building the form

To use this validator we need to create a form and define it in there. For this purpose we’re going to create a simple user signup form. We use the reactive way to create the form. This can be done like this:

reactions

The template can then look like this:

reactions

We now have a working reactive form. We however did not apply any form validation. To add form validation we simply pass our validators into the form creation function like this:

reactions

We used the required and email validators from Angular. We also imported our custom created validateCharacters validator. The last thing we still have to do is presenting potential errors to our users.

reactions

Presenting errors to the user

There are two moments when we want to present errors to our users. When the focus moves from one field to the other and right before the final form submission.

reactions

Let’s create a form error service for this. This service could potentially look like this:

reactions

The validateForm method accepts the form to validate, a form errors object and a boolean on wether to check dirty fields or not. The function than loops over all the form controls and checks if there are errors on that control. If there are any, we find the correct error message that came from the validationMessages method and pass back the form errors object.

reactions

To use this error service in our components we have to do the following:

reactions

Now the final step is to show the error messages in our template. We can do that like this:

reactions

If there any errors on one particular field, we show the message that’s in the formErrors object.

reactions

Conclusion

I hope this article helps you to validate your forms and also helps you to give your users a better experience when filling in the forms.

reactions

Thanks for reading. Please hit the clap button if you liked this article. Any feedback? Let me know. Also check my other articles:

reactions

Follow me on Medium or twitter and let’s connect on LinkedIn

reactions

Tags