AngularJS inputインストラクション

定義と使用方法

AngularJSで <input> 要素のデフォルト動作を変更しますが、ng-model属性が存在する場合に限ります。

これらはデータバインディングを提供し、これはAngularJSモデルの一部であり、AngularJS関数やDOMで参照および更新できます。

これらは検証を提供します。例： required 属性の <input> 要素が空であれば、その $valid 状態が設定されます false。

これらはまた状態制御を提供します。AngularJSはすべての入力要素の現在の状態を保存します。

入力フィールドには以下の状態があります：

各状態の値はブール値を表し、 true または false。

データバインディング付きの入力フィールド：

<input ng-model="myInput">
<p>入力フィールドの値は：</p>
<h1>{{myInput}}</h1>

<input ng-model="name">

を使用して ng-model 属性の値を使って入力要素を参照します。

AngularJSアプリケーション内の <input> 要素には特定のクラスが割り当てられます。これらのクラスは、入力要素の状態に応じてスタイルを設定するために使用できます。

以下のクラスが追加されました：

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>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>