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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right






                        filter_none








Output:


Before Typing:




After Typing:




Example 2: 











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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> 



















                        chevron_right







                        filter_none








Output:

Before Typing:




After Typing:




Browser Support: Following browsers support texarea directive.