表单验证的条件样式 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>

我的电子邮件字段有最小长度、最大长度和要求的验证。如果其中任何一个验证失败，我想添加一个 class 'has-error' 或添加某种样式。任何帮助将非常感激。

Answer 1

Angular 已经为您完成了。如果验证失败，输入将具有 class ng-invalid，您可以通过 CSS.

设置样式

参见 使用 CSS classes 的示例 AngularJS Forms:

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

此 CSS 仅在输入无效且已被编辑时应用。

不要使用 ng-class 东西，如前所述，Angular 会为您添加正确的 classes。

Answer 2

如果您正在使用 bootstrap，错误 class 是个好主意。

你的输入应该是一个表单，你可以在父 div.

上使用 ng-class 指令

Angular 允许您以这种方式检查表单输入：myForm.email.$invalid

如果您希望样式仅在用户具有 'touched' 输入后应用，您可以测试 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

conditional styling on Form Validation AngularJs

angularjs

angularjs-validation