Q:

Angular validation - outputting invalid fields in page order

I'm trying to output invalid field names in a generic way. The below does this by looping through all the fields in the form and just appending to a string with the key name. It gets run when you click a submit button:
for (var key in form) {
    if (key.indexOf("$") !== 0) {
        if (form[key].$invalid) {
            str += '- ' + key + '<br />';
        }
    }
}

My only issue with this is the order that the keys appear dont match the order that the fields appear on the page. I'm assuming it's related to how the fields themselves are created, since dynamically generated fields seem to appear before normal fields. I'd really like to maintain the order, but can't think of a good way to do this.
Was hoping someone would have a suggestion?

A:

You can simply iterate over your controls by going through the DOM:
// Assuming $element is your <form>
var invalidFields = [];
$element.find('.ng-invalid').each(function() {
    invalidFields.push(this.name);
});

This approach is just using the fact that NgModelController will set ng-invalid CSS class on all invalid controls. Using Angular does not mean you are forbidden to work with DOM.

