表单验证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和required验证。 我想添加一个类'has-error'或添加某个样式，如果这些验证中的任何一个失败。 任何帮助将非常感激。

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 && 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>