Angularjs - highlight a field when a field is invalid

Question

I am new to Angular and would like to know how I can highlight form fields when validation fails.

I created a fiddle to illustrate what I need.

Any help is appreciated.

<p> <label for="name">User:</label> <input type="text" name="name" ng-model="name" required ng-minlength="5" ng-maxlength="32"> <span ng-show="register.name.$error.required" class="err"> Required</span> <span ng-show="register.name.$error.minlength" class="err"> Minimum 5 characters</span> <span ng-show="register.name.$error.maxlength" class="err"> Maximum 32 characters</span> </p> 

Answer 1

In your case, you can try ng-class:

 <input type="text" ng-class="{highlight:register.name.$error.required || register.name.$error.minlength || register.name.$error.maxlength}" name="name" ng-model="name" required ng-minlength="5" ng-maxlength="32"> 

Demo

Another solution is to style for these classes:

 ng-valid ng-invalid ng-pristine ng-dirty 

Angular automatically switches these classes based on the current validation state. The following is a demonstration of invalid input:

 input.ng-invalid { background:#F84072; border: 2px red solid; } 

Demo