AngularJS assigns CSS classes to forms and input fields based on their states.
The following classes are applied to or removed from input fields:
- ng-untouched: The field has not been interacted with yet.
- ng-touched: The field has been interacted with.
- ng-pristine: The field has not been modified.
- ng-dirty: The field has been changed.
- ng-valid: The content of the field is valid.
- ng-invalid: The content of the field is invalid.
- ng-valid-key: A key for each validation (e.g., ng-valid-required), useful when multiple validations are needed.
- ng-invalid-key: An example would be ng-invalid-required.
The following classes are applied to or removed from forms:
- ng-pristine: No fields have been modified.
- ng-dirty: One or more fields have been modified.
- ng-valid: The form content is valid.
- ng-invalid: The form content is invalid.
- ng-valid-key: A key for each validation (e.g., ng-valid-required), useful when multiple validations are necessary.
- ng-invalid-key: An example would be ng-invalid-required.
These classes are removed when the corresponding value is false.
Add styles for these classes to enhance your application’s user interface and make it more intuitive.
Example
Use standard CSS to apply styles.
|
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
|
Forms can also be customized with styles.
Example
Apply styles for unmodified (pristine) forms as well as for modified forms.
|
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
|
