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

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?

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

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

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.

You can loop through form.$error.pattern.

$scope.updateProfile = function() {
    var error = $scope.profileForm.$error;
    angular.forEach(error.pattern, function(field){
        if(field.$invalid){
            var fieldName = field.$name;
            ....
        }
    });
}

I wanted to display all the errors in the disabled Save button tooltip, so the user will know why is disable instead of scrolling up and down the long form.

Note: remember to add name property to the fields in your form

	if (frm) {
	    disable = frm.$invalid;
	    if (frm.$invalid && frm.$error && frm.$error.required) {
	        frm.$error.required.forEach(function (error) {
	            disableArray.push(error.$name + ' is required'); 
	        });
	    }
	}
    if (disableArray.length > 0) {
	    vm.disableMessage = disableArray.toString();
	}

For my application i display error like this:

<ul ng-repeat="errs in myForm.$error">
<li ng-repeat="err in errs">{{err.$name}}</li></ul>

if you want to see everything, just user 'err' that will display something like this:

 "$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": { "required": true },
"$name": "errorfieldName",
"$options": {}

Not this well formatted, but you will see these things there...

When any field is invalid, if you try to get its value, it will be undefined.

Lets say you have a text input attached to $scope.mynum that is valid only when you type numbers, and you have typed ABC on it.

If you try to get the value of $scope.mynum, it would be undefined; it wouldn't return the ABC.

(Probably you know all this, but anyway)

So, I would use an array that have all the elements that need validation that I have added to the scope and use a filter (with underscore.js for example) to check which ones return as typeof undefined.

And those would be the fields causing the invalid state.

If you want to find field(s) which invalidates form on UI without programmatically, just right click inspect (open developer tools in elements view) then search for ng-invalid with ctrl+f inside this tab. Then for each field you find ng-invalid class for, you can check if field is not given any value while it is required, or other rules it may violate (invalid email format, out of range / max / min definition, etc.). This is the easiest way.