Angularjs - trường đánh dấu khi trường không hợp lệ

Question

Tôi mới sử dụng Angular và muốn biết cách tôi có thể làm nổi bật các trường biểu mẫu khi xác thực không thành công.

Tôi đã tạo một fiddle để minh họa những gì tôi đang theo dõi.

Mọi trợ giúp đều được đánh giá cao.

 <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

Trong trường hợp của bạn, bạn có thể thử ng-lớp:

<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

giải pháp khác là phong cách bằng các lớp:

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

góc tự động Toggles những các lớp dựa trên trạng thái xác thực hiện tại. Dưới đây là bản demo để làm nổi bật đầu vào không hợp lệ:

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

DEMO