An input field with data-binding:
<p>The value of the input field is:</p>
Definition and Usage
AngularJS modifies the default behavior of
but only if the
ng-model attribute is present.
They provide data-binding, which means they are part of the AngularJS model, and can be referred to, and updated, both in AngularJS functions and in the DOM.
They provide validation. Example: an
<input> element with
required attribute, has the
$valid state set to
false as long as it is empty.
They also provide state control. AngularJS holds the current state of all input elements.
Input fields have the following states:
$untouchedThe field has not been touched yet
$touchedThe field has been touched
$pristineThe field has not been modified yet
$dirtyThe field has been modified
$invalidThe field content is not valid
$validThe field content is valid
The value of each state represents a Boolean value, and is either
Input elements are being referred to by using the value of the
<input> elements inside an AngularJS application are given certain classes. These
classes can be used to style input elements according to their state.
The following classes are added:
ng-untouchedThe field has not been touched yet
ng-touchedThe field has been touched
ng-pristineThe field has not been modified yet
ng-dirtyThe field has been modified
ng-validThe field content is valid
ng-invalidThe field content is not valid
ng-valid-keyOne key for each validation. Example:
ng-valid-required, useful when there are more than one thing that must be validated
The classes are removed if the value they represent is
Apply styles for valid and invalid input elements, using standard CSS: