Question

83

Angularjs - highlight field when field not valid

rated 0 times [ 85] [ 2] / answers: 1 / hits: 20674 / 11 Years ago, sat, october 19, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

teagan

Add To Favorites

Follow

Total Points: 98

Total Questions: 106

Total Answers: 101

Location: Tajikistan

Member since Thu, Apr 14, 2022

2 Years ago

answered 11 Years ago isham · Accepted Answer

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