AngularJS textareaインストラクション
定義と使用方法
AngularJSが変更 <textarea> 要素のデフォルトの動作ですが、 ng-model 属性が存在します。
それらはデータバインディングを提供し、これはAngularJSモデルの一部であり、AngularJS関数やDOMで参照および更新できます。
それらはバリデーションを提供します。例： required 属性 <textarea> 要素が空であれば、その $valid 状態が設定されます false。
それらはまた状態制御を提供します。AngularJSはすべてのテキストエリア要素の現在の状態を保存します。
テキストエリアフィールドには以下の状態があります：
$untouchedこのフィールドはタッチされていません$touchedこのフィールドはタッチされています$pristineこのフィールドはまだ変更されていません$dirtyこのフィールドは変更されました$invalidフィールドの内容が無効です$validフィールドの内容が有効です
各状態の値はブール値で、真または偽を表します。
例
データバインディング付きのテキストエリア：
<textarea ng-model="myTextarea"></textarea>
<p>テキストエリアフィールドの値は：</p>
<h1>{{myTextarea}}</h1>
文法
<textarea ng-model="name"></textarea>
次のように使用して ng-model 属性の値を使ってテキストエリア要素を参照します。
CSSクラス
AngularJSアプリケーション内の <textarea> 要素にクラスが割り当てられます。これらのクラスはテキストエリア要素の状態に応じてスタイルを設定するために使用できます。
以下のクラスが追加されました：
ng-untouchedこのフィールドはタッチされていませんng-touchedこのフィールドはタッチされていますng-pristineこのフィールドはまだ変更されていませんng-dirtyこのフィールドは変更されましたng-validフィールドの内容が有効ですng-invalidフィールドの内容が無効ですng-valid-key各キーごとにバリデーションを実行します。例えば：ng-valid-required、複数のバリデーションが必要な場合に非常に有用ですng-invalid-key例えば：ng-invalid-required
クラスが表す値が false、それらのクラスは削除されます。
例
標準の CSS を使用して、有効および無効なテキストエリア要素にスタイルを適用します：
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>
