Angularjs - 當字段無效時突出顯示字段

Question

我是Angular的新手，想知道在驗證失敗時如何突出顯示錶單字段。

我已經創建了一個fiddle來說明我在做什麼。

任何幫助表示讚賞。

 <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

在你的情況，你可以嘗試納克級：

<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

另一個解決方案是風格上的這些類：

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

角度自動切換這些基於當前驗證狀態的類。下面是hightlight無效輸入演示：

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

DEMO