Knowing which validations failed in a form with AngularJS

Sometimes we want to submit a form and know which validations failed, and in which fields. Perhaps

Sometimes we want to submit a form and know which validations failed, and in which fields. Perhaps we don’t know how to do it, but we do know that we don’t want to assess each field separately. Here we are going to see an alternative.

We start off on a page with a form which has several inputs with different validations.

If we go over the documentation of AngularJS about controllers, we will see that the form has an $invalid property and an $error property, which has a map with the type of validation (required, maximum, minimum, etc.) as key and a collection with the fields where each validation failed as value. That’s perfect! We just have to iterate that with a repeater:

However, we get this:

The documentation doesn’t say much more. The problem is that the objects belong to the kind ngModelController and their properties are hidden (they start with $). Therefore, in order to do something more generic to show our validation errors, we can take the following action:

And we get this:

Are you looking for the best technical solution for your company? Contact us for more information and we will get back to you!

 

Share this articleShare on LinkedInTweet about this on TwitterShare on FacebookShare on Google+Email this to someone
Go Back