AngularJS textarea Directive


An textarea with information binding:

<textarea ng-model="myTextarea"></textarea>

<p>The estimation of the textarea field is:</p>
Try it yourself »

Definition and Usage

AngularJS alters the default conduct of <textarea> components, be that as it may, just if the ng-model characteristic is present.

They give information authoritative, which implies they are a piece of the AngularJS display, also, can be alluded to, and refreshed, both in AngularJS capacities and in the DOM.

They give approval. Model: a <textarea> component with a required property, has the $valid state set to false as long as it is empty.

They likewise give state control. AngularJS holds the present condition of all textarea elements.

Textarea fields have the accompanying states:

  • $untouched The field has not been contacted yet
  • $touched The field has been touched
  • $pristine The field has not been altered yet
  • $dirty The field has been modified
  • $invalid The field content isn't valid
  • $valid The field content is valid

The estimation of each state speaks to a Boolean esteem, and is either true of false.


<textarea ng-model="name"></textarea>

Textarea components are being alluded to by utilizing the estimation of the ng-model attribute.

CSS Classes

<textarea> components inside an AngularJS application are given sure classes. These classes can be utilized to style textarea components as per their state.

The following classes are added:

  • ng-untouched The field has not been contacted yet
  • ng-touched The field has been touched
  • ng-pristine The field has not been  altered yet
  • ng-dirty The field has been modified
  • ng-valid The field content is valid
  • ng-invalid The field content isn't valid
  • ng-legitimate key One key for every approval. Precedent: ng-legitimate required, helpful when there are mutiple thing that must be validated
  • ng-invalid-key Example: ng-invalid-required

The classes are evacuated if the esteem they speak to is false.


Apply styles for legitimate and invalid textarea components, utilizing standard CSS:

textarea.ng-invalid {
    foundation shading: pink;
textarea.ng-legitimate {
    foundation shading: lightgreen;
Try it Yourself »