How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

Question

I have a problem where my CSS is not taking effect (in Chrome), and I think there is some conflict with Twitter Bootstrap.

input.ng-invalid {
    border-color: r         


        

Answer 1

I think a better solution is to just add your own CSS rules. It makes the code much simpler and, as a bonus, you can set the rule to only apply to "dirty" elements. That way fields will only be highlighted after the user has tried to enter something.

In my application I've just added this css, based on an example in the AngularJS forms documentation.

/* Forms */
.ng-invalid.ng-dirty {
  border-color: red;
  outline-color: red;
}
.ng-valid.ng-dirty {
  border-color: green;
  outline-color: green;
}