CSS验证规则适用于AngularJS v1.0.8的onload

Question

I have a UI issue with AngularJS, now please bare in mind that I have been working with Angular.js for 2 hours now and I have never used it before. I have inherited a project and I'm not sure what is going on... but

I have the following form items:

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

and in my CSS I have set the following css classes

/**
*  Form Validation
*/

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

however when the page loads for the first time the css rules are applied to the empty form items? Thus all the input type="email" or input="text" have a red border applied to them. The AngularJS version is v1.0.8

Has anyone experienced this before and resolved the issue?

Answer 1

Use :not pseudo-class, like this:

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

Working example: http://plnkr.co/edit/C38kgE?p=preview