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和required验证。我想添加一个课程＆＃39; has-error＆＃39;或者，如果这些验证中的任何一个失败，则添加某种样式。任何帮助将非常感激。

Answer 1

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

请参阅AngularJS Forms上使用CSS类的示例：

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

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

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

Answer 2

如果您使用的是bootstrap，那么has-error类是个好主意。

您的输入应该是一个表单，您可以在父div上使用ng-class指令。

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

如果您希望仅在用户触摸后才应用该样式。输入，你可以测试myForm.email。$ invalid＆amp;＆amp; myForm.email。$脏

<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上的条件样式

2 个答案: