The <textarea> element’s behavior can be controlled & manipulated with the help of AngularJS data-binding. For this, the ng-model attribute is used with this element. Textarea elements provide validation and basic state control. The ng-model attribute makes reference to text-directive. The current state of textarea elements is held by Angular JS. The list of states of the Textarea directive is described below:
- $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, the user has entered in the text field.
Example 1: This example describes the basic usage of the textarea Directive in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<style>
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: green;
}
textarea.ng-valid {
color: green;
background-color: lightgreen;
}
textarea.ng-invalid {
background-color: lightblue;
}
</style>
</head>
<body ng-app="">
<h1>GeeksforGeeks</h1>
<h3>Textarea Directive</h3>
<p><b>Textarea field:</b></p>
<textarea placeholder="Start typing..."
ng-model="gfg" required>
</textarea>
</body>
</html>
|
Output:
Example 2: In this example, we have used the .ng-pristine class, which specifies the form has not been modified by the user, & .ng-dirty class, which specifies the form has been made dirty (modified ) by the user, is utilized with the textarea element in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<style>
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: green;
}
textarea.ng-dirty {
color: green;
background-color: lightgreen;
}
textarea.ng-pristine {
background-color: green;
}
</style>
</head>
<body ng-app="">
<h1>GeeksforGeeks</h1>
<h3>Textarea Directive</h3>
<p><b>Textarea field:</b></p>
<textarea placeholder="Start typing..."
ng-model="gfg" required>
</textarea>
</body>
</html>
|
Output:
Reference: https://docs.angularjs.org/api/ng/directive/textarea
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
24 Aug, 2022
Like Article
Save Article