4 
<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 和必需的验证。如果这些验证中的任何一个失败，我想添加一个类“有错误”或添加某种样式。任何帮助将非常感激。

4

2 回答 2

3

Angular 已经为你做到了。如果验证失败，输入将具有 class ng-invalid，您可以通过 CSS 对其进行样式设置。

请参阅在AngularJS 表单上使用 CSS 类的示例：

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

此 CSS 仅适用于输入无效且已被编辑的情况。

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

于 2015-10-22T20:44:47.313 回答
0

如果您使用的是引导程序，那么 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>
于 2015-10-22T20:57:37.073 回答