AngularJS: Is there any way to determine which fields are making a form invalid?

Question

I have the following code in an AngularJS application, inside of a controller, which is called from an ng-submit function, which belongs to a form with name profileForm:

$scope.updateProfile = function() {
  if($scope.profileForm.$invalid) { 
    //error handling..
  }
  //etc.
};

Inside of this function, is there any way to figure out which fields are causing the entire form to be called invalid?

Answer 1

Each input name's validation information is exposed as property in form's name in scope.

HTML

<form name="someForm" action="/">
    <input name="username" required />
    <input name="password" type="password" required />
</form>

JS

$scope.someForm.username.$valid
// > false
$scope.someForm.password.$error
// > { required: true }

The exposed properties are $pristine, $dirty, $valid, $invalid, $error.

If you want to iterate over the errors for some reason:

$scope.someForm.$error
// > { required: [{$name: "username", $error: true /*...*/},
//                {$name: "password", /*..*/}] }

Each rule in error will be exposed in $error.

Here is a plunkr to play with http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview

Answer 2

For checking which field of form is invalid

console.log($scope.FORM_NAME.$error.required);

this will output the array of invalid fields of the form

Answer 3

If you want to see which fields are messing up with your validation and you have jQuery to help you, just search for the "ng-invalid" class on the javascript console.

$('.ng-invalid');

It will list all DOM elements which failed validation for any reason.