Since the inputs are empty and therefore invalid when instantiated, Angular correctly adds the ng-invalid
class.
A CSS rule you might try:
input.ng-dirty.ng-invalid {
color: red
}
Which basically states when the field has had something entered into it at some point since the page loaded and wasn't reset to pristine by $scope.formName.setPristine(true)
and something wasn't yet entered and it's invalid then the text turns red
.
Other useful classes for Angular forms (see input for future reference )
ng-valid-maxlength
- when ng-maxlength
passes
ng-valid-minlength
- when ng-minlength
passes
ng-valid-pattern
- when ng-pattern
passes
ng-dirty
- when the form has had something entered since the form loaded
ng-pristine
- when the form input has had nothing inserted since loaded (or it was reset via setPristine(true)
on the form)
ng-invalid
- when any validation fails (required
, minlength
, custom ones, etc)
Likewise there is also ng-invalid-<name>
for all these patterns and any custom ones created.