AngularJSinputディレクティブ

定義と使用法

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

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

それらは検証を提供します。例：属性を持つ<input>要素は、空である限り状態が設定さ れています。required$validfalse

また、状態制御も提供します。AngularJSは、すべての入力要素の現在の状態を保持します。

入力フィールドの状態は次のとおりです。

• $untouched フィールドはまだ触れられていません
• $touched フィールドに触れました
• $pristine フィールドはまだ変更されていません
• $dirty フィールドが変更されました
• $invalid フィールドの内容が無効です
• $valid フィールドの内容は有効です

各状態の値はブール値を表し、またはのいずれtrue かfalseです。

構文

入力要素は、ng-model属性の値を使用して参照されています。

CSSクラス

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

次のクラスが追加されます。

• ng-untouched フィールドはまだ触れられていません
• ng-touched フィールドに触れました
• ng-pristine フィールドはまだ変更されていません
• ng-dirty フィールドが変更されました
• ng-valid フィールドの内容は有効です
• ng-invalid フィールドの内容が無効です
• ng-valid-key検証ごとに1つのキー。例：ng-valid-required、検証する必要のあるものが複数ある場合に役立ちます
• ng-invalid-key 例： ng-invalid-required

クラスが表す値が。の場合、クラスは削除されますfalse。