Conditional style for AngularJs form validation

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 the required validation in my email field. I want to add the class 'has-error' or add a specific style if any of these checks fail. Any help is appreciated.

Answer 1

Angular will already do this for you. If the validation fails, the input will have a class ng-invalidthat you can create using CSS.

See an example from Using CSS classes on AngularJS Forms :

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

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

ng-class, , Angular .

Answer 2

bootstrap, has-error - .

, ng-class div.

Angular : myForm.email. $invalid

, , "" , myForm.email. $invalid && myForm.email. $

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