AngularJS: list all form errors

Question

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

I noticed this the other day. It doesn't make sense to me because you can inspect `form.iname.$error` and get the correct values. What I ended up doing was using `form.$valid` to check validity and enable submit button instead. — Ed_, Mar 11 '14 at 12:29
Hi Ed thanks a lot for your response. I agree, though I'd like to tell the user which control is failing to validate. The form is inside a tabbed view, so it is easy to miss that you can not save because there is a validation error inside an repeat in a tab you are currently not viewing. (I hope my explanation was good enough to follow :)) — michael, Mar 11 '14 at 13:25
Yeah I agree it's good to show the user what's valid and what isn't. One option is that you can have error text in `` tags for every possible error and use `ng-show="form.fieldName.$error.required"` for example. You could then either inline those with the inputs, or put them near the submit button. It's definitely not ideal though - I wonder if the unpopulated `$error` value is a bug with angular? — Ed_, Mar 11 '14 at 14:10
I believe $error is populated, you just can't dump it out as JSON nicely. Take a look here: http://plnkr.co/edit/Z47J2W?p=preview The error types can all be iterated. — c0bra, Mar 11 '14 at 14:43
c0bra: thanks, I'll try to follow your solution, looks like it does exactly what I need. — michael, Mar 11 '14 at 15:39
michael: please see my answer on this question: http://stackoverflow.com/questions/12044277/how-to-validate-inputs-dynamically-created-using-ng-repeat-ng-show-angular/24470458#24470458 this method will prevent the repeated ng-forms from overwriting each other — Al Johri, Jul 07 '14 at 20:48

score 130 · Accepted Answer · edited May 23 '17 at 11:47

130

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.

edited May 23 '17 at 11:47

Community

1
1

answered Nov 25 '14 at 08:52

Brett DeWoody

59,771
29
135
184

Note: Tags must have `name` attribute for it to return names. If you tend not to assign name tags, coz angular, it will return blanks at `e.$name` – abhig10 Aug 31 '17 at 10:55

score 5 · Answer 2 · answered Jul 10 '15 at 22:49

I made a function that you pass the form to. If there are form errors it will display them in the console. It shows the objects so you can take a look. I put this in my save function.

function formErrors(form){
  var errors = [];
  for(var key in form.$error){
    errors.push(key + "=" + form.$error);
  }
  if(errors.length > 0){
    console.log("Form Has Errors");
    console.log(form.$error);
  }
};

score 3 · Answer 3 · answered Feb 24 '16 at 21:58

Brett DeWoody's answer is correct. I wanted to do the logic in my controller though. So I wrote the below, which is based off of the answer user5045936 gave. This may also help some of you who want to go the controller route. By the way Im using the toaster directive to show my users validation messages.

 if (!vm.myForm.$valid) {
            var errors = [];

            for (var key in vm.myForm.$error) {
                for (var index = 0; index < vm.myForm.$error[key].length; index++) {
                    errors.push(vm.myForm.$error[key][index].$name + ' is required.');
                }
            }

            toaster.pop('warning', 'Information Missing', 'The ' + errors[0]);

            return;
        }

score 2 · Answer 4 · answered Jul 11 '16 at 20:31

2

If you have nested forms then you will find this helpful:

 function touchErrorFields(form) {
    angular.forEach(form.$error, function (field) {
      angular.forEach(field, function(errorField) {
        if (!errorField.hasOwnProperty('$setTouched')) {
          touchErrorFields(errorField);
        } else {
          errorField.$setTouched();
        }
      })
    });
  }

answered Jul 11 '16 at 20:31

vlio20

8,955
18
95
180

This solution is perfect to recursively show errors on nested form, thank you ! – Nicolas Leucci May 05 '17 at 13:36
@NicolasLeucci, you are welcome! happy that it helped you – vlio20 May 05 '17 at 16:28
With angularjs 1.6.2, errorField.hasOwnProperty('$setTouched') returns false. – David V. Aug 24 '17 at 13:35

AngularJS: list all form errors

4 Answers4

Linked