AngularJS textarea Directive
Example
An textarea with data-binding:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Try it yourself »
Definition and Usage
AngularJS modifies the default behavior of <textarea> 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 <textarea> 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 textarea elements.
Textarea 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
of false.
Syntax
<textarea ng-model="name"></textarea>
Textarea elements are being referred to by using the value of the ng-model attribute.
CSS Classes
<textarea> elements inside an AngularJS application are given certain classes. These
classes can be used to style textarea 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 textarea elements, using standard CSS:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>
Try it Yourself »
