angularjs - Form Validation AngularJs の条件付きスタイリング

Question

<label class="item item-input margin5px">
<input type="email" name="email"  class="form-control" placeholder="Email" ng-model="user.email" ng-minlength=5 ng-maxlength=100   required>
</label>

電子メールフィールドに minlength、maxlength、および必要な検証があります。これらの検証のいずれかが失敗した場合、クラス「has-error」を追加するか、特定のスタイルを追加したいと考えています。どんな助けでも大歓迎です。

score 3 · Accepted Answer

Angular はすでにそれを行っています。検証が失敗した場合、入力にはng-invalidCSS を介してスタイルを設定できる class が含まれます。

Using CSS classes on AngularJS Formsの例を参照してください:

input.ng-invalid.ng-touched {
    background-color: #FA787E;
}

この CSS は、入力が無効で編集されている場合にのみ適用されます。

Angular は正しいクラスを追加します。

score 0 · Accepted Answer

ブートストラップを使用している場合は、has-error クラスを使用することをお勧めします。

入力はフォームにする必要があり、親 div で ng-class ディレクティブを使用できます。

Angular では、フォーム入力をそのようにチェックできます: myForm.email.$invalid

ユーザーが入力に「触れた」場合にのみスタイルを適用する場合は、 myForm.email.$invalid && myForm.email.$dirty をテストできます

<form name="myForm">
<div class="form-group" ng-class="{'has-error':myForm.email.$invalid && myForm.email.$dirty}">
    <label class="item item-input margin5px"></label>
    <input type="email" name="email"  class="form-control" placeholder="Email" ng-model="user.email" ng-minlength=5 ng-maxlength=100   required>        
</div>
</form>

angularjs - Form Validation AngularJs の条件付きスタイリング

2 に答える 2

Related

Reference