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

I have created a fiddle to illustrate what I'm after.

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>

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

I have created a fiddle to illustrate what I'm after.

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>

• javascript
• angularjs

1 Answer 1

In your case, you could 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 on these classes:

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

Angular automatically toggles these classes based on current validation status. Below is the demo to hightlight invalid inputs:

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

DEMO