AngularJSformディレクティブ
例
このフォームの「有効な状態」は、必要な入力フィールドが空である限り、「真」とは見なされません。
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
定義と使用法
AngularJSは、<form>要素のデフォルトの動作を変更します。
AngularJSアプリケーション内のフォームには、特定のプロパティが与えられています。これらのプロパティは、フォームの現在の状態を記述します。
フォームには次の状態があります。
$pristineフィールドはまだ変更されていません$dirty1つ以上が変更されました$invalidフォームの内容が無効です$validフォームの内容は有効です$submittedフォームが送信されます
各状態の値はブール値を表し、またはのいずれtrue
かfalseです。
AngularJSのフォームは、action属性が指定されていない場合、サーバーにフォームを送信するデフォルトのアクションを防ぎます。
構文
<form name="formname"></form>
name属性の値を使用して、フォームが参照されています。
CSSクラス
AngularJSアプリケーション内のフォームには、特定のクラスが与えられます。これらのクラスは、状態に応じてフォームのスタイルを設定するために使用できます。
次のクラスが追加されます。
ng-pristineまだ変更されていないフィールドはありませんng-dirty1つ以上のフィールドが変更されましたng-validフォームの内容は有効ですng-invalidフォームの内容が無効ですng-valid-key検証ごとに1つのキー。例：ng-valid-required、検証する必要のあるものが複数ある場合に役立ちますng-invalid-key例：ng-invalid-required
クラスが表す値が。の場合、クラスは削除されますfalse。
例
変更されていない（元の）フォームと変更されたフォームにスタイルを適用します。
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>