AngularJS | textarea Directive
Textarea elements provide validation and basic state control. Attribute ng-model makes reference to text-directive. The current state of textarea elements is held by Angular JS. Listed below are the states of Textarea directive:
- $touched: It signifies a touched field.
- $ untouched: It signifies an untouched field.
- $valid: It signifies valid field content.
- $invalid: It signifies invalid field content.
- $dirty: It signifies a modification in field content.
- $pristine: It signifies unmodified field content.
Syntax:
<textarea ng-model="name"></textarea>
Properties: Classes are used to style Textarea elements depending on the state they hold. The ng-model attribute is used to make reference to text-directive. Listed below are the commonly used classes:
- ng-touched: It signifies class applied on the touched field.
- ng-untouched: It signifies class applied on the untouched field.
- ng-valid: It signifies class applied on valid field content.
- ng-invalid: It signifies class used for invalid field content.
- ng-pristine: It signifies class used for the state having a modification in the field.
- ng-dirty: It signifies class used with unmodified field content.
Return Value: It returns the text, user has entered in the text-field. Example 1:
javascript
<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script><style> textarea.ng-valid { color: green; background-color: lightgreen; } textarea.ng-invalid { background-color: green; }</style><body ng-app=""> <h1> <center> GeeksforGeeks </center> </h1> <p><b>Textarea field:<br><br>Start typing.......</b></p> <textarea ng-model="gfg" required> </textarea></body></html> |
Output: Before Typing: 
After Typing: 
Example 2:
javascript
<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script><style> textarea.ng-dirty { color: green; background-color: lightgreen; } textarea.ng-pristine { background-color: green; }</style><body ng-app=""> <h1> <center> GeeksforGeeks </center> </h1> <p> <b>Textarea field:<br> <br>Start typing.......</b></p> <textarea ng-model="gfg" required> </textarea></body></html> |
Output: Before Typing: 
After Typing: 
Browser Support: Following browsers support textarea directive.
- Google Chrome
- Internet Explorer
- Opera
- Firefox
- Safari
.png)
