最新のWeb開発のチュートリアル
 

AngularJSフォームの指令


このフォームの「有効な状態」であれば、必要な入力フィールドが空であるように、「真」を検討されません。

<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>
»それを自分で試してみてください