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

、あなたはNG-クラスを試みることができる：

<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 

角度は自動的にこれらを切り替えますクラスは現在の検証ステータスに基づいています。あなたはCSSクラス以下のオーバーライドを試みるために第二の溶液が動作しない場合

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

DEMO