michael michael - 4 months ago 14
AngularJS Question

AngularJS: list all form errors

Background:
I am currently working on an application with tabs; and I'd like to list the fields / sections that fail validation, to direct the user to look for errors in the right tab.

So I tried to leverage

form.$error
to do so; yet I don't fully get it working.

If validation errors occur inside a
ng-repeat
, e.g.:

<div ng-repeat="url in urls" ng-form="form">
<input name="inumber" required ng-model="url" />
<br />
</div>


Empty values result in
form.$error
containing the following:


{ "required": [
{
"inumber": {}
},
{
"inumber": {}
}
] }


On the other hand, if validation errors occur outside this
ng-repeat
:

<input ng-model="name" name="iname" required="true" />


The
form.$error
object contains the following:

{ "required": [ {} ] }


yet, I'd expect the following:

{ "required": [ {'iname': {} } ] }


Any ideas on why the name of the element is missing?

A running plunkr can be found here:
http://plnkr.co/x6wQMp

Answer

As @c0bra pointed out in the comments the form.$error object is populated, it just doesn't like being dumped out as JSON.

Looping through form.$errors and it's nested objects will get the desired result however.

<ul>
  <li ng-repeat="(key, errors) in form.$error track by $index"> <strong>{{ key }}</strong> errors
    <ul>
      <li ng-repeat="e in errors">{{ e.$name }} has an error: <strong>{{ key }}</strong>.</li>
    </ul>
  </li>
</ul>

All the credit goes to c0bra on this.

Another option is to use one of the solutions from this question to assign unique names to the dynamically created inputs.