表单验证AngularJs的条件样式答案

【问题标题】：conditional styling on Form Validation AngularJs表单验证AngularJs的条件样式
【发布时间】：2016-01-22 06:43:39
【问题描述】：

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

【问题讨论】：

到目前为止你尝试了什么？
我曾尝试使用 ng-class="{ 'has-error': userForm.email.$invalid }" 和 ng-class="{ 'has-error': userForm.email.$ error.required }" 和 ng-style 也是。

标签： angularjs angularjs-validation

【解决方案1】：

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

参见AngularJS Forms上使用 CSS 类中的示例：

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

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

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

【讨论】：

我曾尝试使用 ng-class="{ 'has-error': userForm.email.$invalid }"。但它总是添加类'has-error'验证是否失败。
更新了我的答案。不要使用 ng-class，请参阅链接。
谢谢哥们！！看来它确实奏效了。非常感谢:)

【解决方案2】：

如果您使用引导程序，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>

【讨论】：