Angular Validation to show all errors on submit

Question

I have a simple example form that will validate a name to be required and 3 letters at least. Nicely display errors as you make the field dirty:

[http://plnkr.co/edit/FEclhN?p=preview]

Our designer wants , however, all the fields that are empty and that are "required" to go "red" as well, when the user presses the Submit button. Right now, unless they have touched and made the field "dirty" the validation doesn't turn the field red.

Of course the field should not be red to start with, only after they Submit the form or they make a field dirty.

jQueryValidate.org does this, so that's what they want in Angular too.

Answer 1

I ran into this same requirement and solved it by adding a boolean onto my controller's scope to indicate if the form had been submitted formSubmitted

And inside my form submit method I would set the value of formSubmitted to true

Then I would dynamically add a class where I needed:

<div ng-class="{'required-error': formSubmitted && formName.field.$error.required}">
    <input name="field" required/>
</div>

Answer 2

You can also use this https://github.com/AngularAgility/AngularAgility For all controls and error summary in toster. Its best way to validate and focus on field which causes validation.