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

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.

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

• min: the value should be higher than a certain number.
• max: the value should be lower than a certain number.
• required: the value cannot be empty
• requiredTrue: the value must be true
• email: the value should be an email
• minLength: 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.

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.

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.

<a href="https://medium.com/media/911d633bccfae01d284b3d4b0c5e5c94/href">https://medium.com/media/911d633bccfae01d284b3d4b0c5e5c94/href</a>

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:

<a href="https://medium.com/media/27a1bbb9e7c197f93a5f72b7c4b557e8/href">https://medium.com/media/27a1bbb9e7c197f93a5f72b7c4b557e8/href</a>

The template can then look like this:

<a href="https://medium.com/media/788ef5ab3d72203a25647973dc41a6a7/href">https://medium.com/media/788ef5ab3d72203a25647973dc41a6a7/href</a>

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:

<a href="https://medium.com/media/ab2e754e1308dcac6b7da7c17ae38191/href">https://medium.com/media/ab2e754e1308dcac6b7da7c17ae38191/href</a>

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.

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.

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

<a href="https://medium.com/media/193dcc0589529fde9f5133d1333a328e/href">https://medium.com/media/193dcc0589529fde9f5133d1333a328e/href</a>

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.

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

<a href="https://medium.com/media/2acf08282a56bab0c00202685b09ac38/href">https://medium.com/media/2acf08282a56bab0c00202685b09ac38/href</a>

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

<a href="https://medium.com/media/f21fff732341f27b91f40c86f327dd06/href">https://medium.com/media/f21fff732341f27b91f40c86f327dd06/href</a>

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

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.

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

• https://hackernoon.com/manage-your-observable-subscriptions-in-angular-with-help-of-rx-js-f574b590a5cb
• https://hackernoon.com/understanding-creating-and-subscribing-to-observables-in-angular-426dbf0b04a3
• https://hackernoon.com/managing-large-s-css-projects-using-the-inverted-triangle-architecture-3c03e4b1e6df
• https://hackernoon.com/understanding-map-filter-and-reduce-in-javascript-5df1c7eee464
• https://hackernoon.com/an-angular-2-webpack-setup-for-development-and-production-3ea8bcc35e24

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