AngularJSフォーム指令

定義と用法

AngularJSの変更 <form> 要素のデフォルトの動作。

AngularJSアプリケーション内のフォームには特定の属性が付与されています。これらの属性はフォームの現在の状態を説明しています。

表单有以下状态：

• $pristine 未修改任何字段
• $dirty 1つ以上のフィールドが変更されました
• $invalid フォームの内容が無効です
• $valid フォームの内容が有効です
• $subscribed 表单已提交

每个状态的值代表一个布尔值，为 true または false。

未指定action属性时，AngularJS中的表单会阻止默认操作，即向服务器提交表单。

实例

例1

所需的输入字段为空时，此表单的“有效状态”不会被视为 "true"：

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>表单的有效状态是：</p>
<h1>{{myForm.$valid}}</h1>

実際に試してみてください

例2

未修改的（原始）表单和修改后的表单应用样式：

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

実際に試してみてください

構文

<form name="formname</form>

を使用して name の値を使用してフォームを参照します。

CSS クラス

AngularJS アプリケーション内のフォームは特定のクラスに設定されています。これらのクラスは、フォームの状態に応じてスタイルを設定するために使用されます。

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

• ng-pristine 変更されていないフィールドはありません
• ng-dirty 1つ以上のフィールドが変更されました
• ng-valid フォームの内容が有効です
• ng-invalid フォームの内容が無効です
• ng-valid-key 各キーをそれぞれバリデーションします。例えば：ng-valid-required、複数の項目がバリデーションが必要な場合に非常に役立ちます
• ng-invalid-key 例えば：ng-invalid-required

クラスが表す値が false、それらのクラスが削除されます。