conditional styling on Form Validation AngularJs

Question

<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.

I had tried using ng-class="{ 'has-error': userForm.email.$invalid }" and ng-class="{ 'has-error': userForm.email.$error.required }" and ng-style also. — Haseeb Mazhar Ranga, Oct 22 '15 at 20:50

Matsemann · Accepted Answer · 2015-10-22T20:49:29.617

3

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.

edited Oct 22 '15 at 20:49

answered Oct 22 '15 at 20:44

Matsemann

21,083
19
56
89

I had tried using ng-class="{ 'has-error': userForm.email.$invalid }". but it always add class 'has-error' either validation fails or not. – Haseeb Mazhar Ranga Oct 22 '15 at 20:47
Updated my answer. Don't use ng-class, see the link. – Matsemann Oct 22 '15 at 20:49
Thanks Man !! It seems it did work. Bundle of thanks :) – Haseeb Mazhar Ranga Oct 22 '15 at 21:00

score 0 · Answer 2 · answered Oct 22 '15 at 20:57

If you are using bootstrap, the has-error class is a good idea.

Your input should be in a form and you can use the ng-class directive on a parent div.

Angular allow you to check a form input that way : myForm.email.$invalid

If you want the style to be applied only once the user has 'touched' the input, you can test myForm.email.$invalid && myForm.email.$dirty

<form name="myForm">
<div class="form-group" ng-class="{'has-error':myForm.email.$invalid && myForm.email.$dirty}">
    <label class="item item-input margin5px"></label>
    <input type="email" name="email"  class="form-control" placeholder="Email" ng-model="user.email" ng-minlength=5 ng-maxlength=100   required>        
</div>
</form>

conditional styling on Form Validation AngularJs

2 Answers2