AngularJS的textarea指令

该<textarea>元素的行为可以在AngularJS数据绑定的帮助下进行控制和操作。为此，ng-model属性被用于该元素。Textarea元素提供验证和基本的状态控制。ng-model属性参考了text-directive。Textarea元素的当前状态是由Angular JS掌握的。Textarea指令的状态列表描述如下。

$touched。它标志着一个被触摸的字段。
$untouched:它标志着一个未触及的字段。
$valid。它标志着有效的字段内容。
$invalid。它标志着无效的字段内容。
$dirty。它标志着字段内容的修改。
$pristine。它标志着未修改的字段内容。

语法:

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

属性：类是用来根据它们所持有的状态来设计Textarea元素的样式。ng-model属性被用来参考text-directive。下面列出的是常用的类。

ng-touched:它标志着应用于被触及的领域的类别。
ng-untouched。它标志着应用于未触及的字段的类。
ng-valid。它标志着应用于有效字段内容的类。
ng-invalid。它标志着用于无效字段内容的类。
ng-pristine。它标志着用于在领域内有修改的状态的类。
ng-dirty。它标志着用于未经修改的字段内容的类。

返回值：它返回用户在文本字段中输入的文本。

例子1：这个例子描述了AngularJS中**textarea指令的基本用法。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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>

输出:

AngularJS的textarea指令

例子2：在这个例子中，我们使用了.ng-pristine类，它指定表单没有被用户修改，而.ng-dirty类，它指定表单已经被用户弄脏（修改），被AngularJS中的textarea元素所利用。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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>

输出:

AngularJS的textarea指令