Angular validation - outputting invalid fields in page order

Question

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?

Pavel Horal · Accepted Answer · 2015-06-11 20:49:44Z

4

+50

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.

answered Jun 11, 2015 at 20:49

Pavel Horal

18.3k3 gold badges70 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abendigo Over a year ago

This is the approach that I ended up using, to solve the issue that brought me to this question originally. I am not sure that it is the answer that the original asker was looking for. If no better answer is given before the bounty expires, I will award it too you.

Asheesh Kumar · Accepted Answer · 2015-06-12 09:48:24Z

0

have a array with the fields name in order and iterate over it to check

for ex: 
var fieldsInOrder = ["field1", "field2", "field3"];//can creaate in dynamically by iterating Dom also or have a static one.
for (var i=0; i<fieldsInOrder.length; i++) {
    var currentField = fieldsInOrder[i];
    if (form[currentField ].$invalid) {
        str += '- ' + key + '<br />';
    }
}

answered Jun 12, 2015 at 9:48

Asheesh Kumar

1614 bronze badges

Collectives™ on Stack Overflow

Angular validation - outputting invalid fields in page order

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related