conditional styling on Form Validation AngularJs

Issue

<label class="item item-input margin5px">
<input type="email" name="email"  class="form-control" placeholder="Email" ng-model="user.email" ng-minlength=5 ng-maxlength=100   required>
</label>

I have minlength, maxlength and required validation on my email field. I want to add a class ‘has-error’ or add a certain style if any one of these validation fails. Any help would be much appreciated.

Solution

Angular will already do that for you. If the validation fails, the input will have the class ng-invalid, which you can style via CSS.

See example from Using CSS classes on AngularJS Forms:

input.ng-invalid.ng-touched {
    background-color: #FA787E;
}

this CSS will only apply if the input is invalid and it has been edited.

Don’t use ng-class stuff, as said, Angular adds the correct classes for you.

Answered By – Matsemann

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.