例
このフォームの「有効な状態」であれば、必要な入力フィールドが空であるように、「真」を検討されません。
<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
なしのフィールドはまだ修正されていません -
$dirty
一つ以上の修飾されています -
$invalid
フォームの内容が有効ではありません -
$valid
フォームの内容が有効です -
$submitted
フォームが送信されます
各状態の値がブール値を表しており、いずれかであるtrue
またはfalse
。
AngularJSのフォームはaction属性が指定されていない場合は、サーバーにフォームを送信されるデフォルトのアクションを、防ぐことができます。
構文
<form name=" formname "></form>
フォームは、name属性の値を使用して呼ばれています。
CSSクラス
AngularJSアプリケーション内部のフォームは、特定のクラスを与えられています。 これらのクラスは、その状態に応じてスタイルを形成するために使用することができます。
以下のクラスが追加されます。
-
ng-pristine
ませフィールドはまだ修正されていません -
ng-dirty
一つ以上のフィールドが変更されました -
ng-valid
フォームの内容が有効です -
ng-invalid
フォームの内容が有効ではありません -
ng-valid- key
各検証のための一つの鍵 。 例:ng-valid-required
検証する必要がありますつ以上のものがある場合に、有用です -
ng-invalid- key
例:ng-invalid-required
それらが表す値であればクラスは削除されますfalse
。
例
変更されていない(原始的な)形のため、および改変形態のスタイルを適用します。
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
»それを自分で試してみてください