使用AngularJS v1.0.8对onload应用了CSS验证规则

时间:2013-09-23 12:12:18

标签: angularjs

我对AngularJS有一个UI问题,现在请记住我已经和Angular.js一起工作了2个小时,我以前从未使用过它。我继承了一个项目,我不确定发生了什么......但是

我有以下表格项目:

<div><label for="email">email:</label><input type="email" id="email" name="email" required ng-model="user.email" ng-minlength=4></div>
<div><label for="userName">Username:</label><input type="text" name="userName" id="userName" ng-model="user.userName" required ng-pattern="/^[A-Za-z0-9 \-_.]*$/" ng-minlength=4></div>
<div><label for="firstName">Vorname:</label><input type="text" name="firstName" id="firstName" ng-model="user.firstName" required  ng-pattern="/^[A-Za-z \-_.]*$/" ng-minlength=3></div>
<div><label for="lastName">Nachname:</label><input type="text" name="lastName" id="lastName" ng-model="user.lastName" required ng-pattern="/^[A-Za-z \-_.]*$/" ng-minlength=4></div>
<div><label for="password1">Passwort:</label><input type="password" name="password1" id="password1" ng-model="user.password1" required ng-minlength=4></div>
<div><label for="password2">Passwort wiederholen:</label><input type="password" name="password2" id="password2" ng-model="user.password2" valid-password2 ng-minlength=4 pw-check="password1"></div>

在我的CSS中我设置了以下css类

/**
*  Form Validation
*/

input.ng-invalid {
  border: 1px solid red;
}
input.ng-valid {
  border: 1px solid green;
}

然而,当页面第一次加载时,css规则应用于空表单项?因此,所有input type="email"input="text"都应用了红色边框。 AngularJS版本是v1.0.8

以前有没有人经历过这个问题并解决了这个问题?

1 个答案:

答案 0 :(得分:1)

使用:not伪类,如下所示:

input.ng-invalid:not(.ng-pristine) {
  border: 1px solid red;
}

工作示例:http://plnkr.co/edit/C38kgE?p=preview