表单验证AngularJs上的条件样式

2023年1月22日 180次阅读 
<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’或添加某个样式,如果这些验证中的任何一个失败.任何帮助将非常感激.

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

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

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

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

不要使用ng-class的东西,如上所述,Angular为你添加了正确的类.

点赞