diff --git a/docs/content/guide/forms.ngdoc b/docs/content/guide/forms.ngdoc index 35299f35..ee8c02e4 100644 --- a/docs/content/guide/forms.ngdoc +++ b/docs/content/guide/forms.ngdoc @@ -60,12 +60,15 @@ Note that `novalidate` is used to disable browser's native form validation. To allow styling of form as well as controls, `ngModel` adds these CSS classes: -- `ng-valid` -- `ng-invalid` -- `ng-pristine` -- `ng-dirty` -- `ng-touched` -- `ng-untouched` +- `ng-valid`: the model is valid +- `ng-invalid`: the model is invalid +- `ng-valid-[key]`: for each valid key added by `$setValidity` +- `ng-invalid-[key]`: for each invalid key added by `$setValidity` +- `ng-pristine`: the control hasn't been interacted with yet +- `ng-dirty`: the control has been interacted with +- `ng-touched`: the control has been blurred +- `ng-untouched`: the control hasn't been blurred +- `ng-pending`: any `$asyncValidators` are unfulfilled The following example uses the CSS to display validity of each form control. In the example both `user.name` and `user.email` are required, but are rendered with red background only when they are dirty. diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index 2e0e41f1..13a44239 100644 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -2281,10 +2281,15 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ * The following CSS classes are added and removed on the associated input/select/textarea element * depending on the validity of the model. * - * - `ng-valid` is set if the model is valid. - * - `ng-invalid` is set if the model is invalid. - * - `ng-pristine` is set if the model is pristine. - * - `ng-dirty` is set if the model is dirty. + * - `ng-valid`: the model is valid + * - `ng-invalid`: the model is invalid + * - `ng-valid-[key]`: for each valid key added by `$setValidity` + * - `ng-invalid-[key]`: for each invalid key added by `$setValidity` + * - `ng-pristine`: the control hasn't been interacted with yet + * - `ng-dirty`: the control has been interacted with + * - `ng-touched`: the control has been blurred + * - `ng-untouched`: the control hasn't been blurred + * - `ng-pending`: any `$asyncValidators` are unfulfilled * * Keep in mind that ngAnimate can detect each of these classes when added and removed. *