AngularJS input Directive
Example
An input field with data-binding:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Try it yourself »
Definition and Usage
AngularJS modifies the default behavior of <input> elements,
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
a 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 true
or false.
Syntax
<input ng-model="name">
Input elements are being referred to by using the value of the ng-model attribute.
CSS Classes
<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 yetng-touchedThe field has been touchedng-pristineThe field has not been modified yetng-dirtyThe field has been modifiedng-validThe field content is validng-invalidThe field content is not validng-valid-keyOne key for each validation. Example:ng-valid-required, useful when there are more than one thing that must be validatedng-invalid-keyExample:ng-invalid-required
The classes are removed if the value they represent is false.
Example
Apply styles for valid and invalid input elements, using standard CSS:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Try it Yourself »
