AngularJS form 指令

定義和用法

AngularJS 修改 <form> 元素的默認行為。

AngularJS 應用程序內的表單被賦予了某些屬性。這些屬性描述了表單的當前狀態。

表單有以下狀態：

• $pristine 尚未修改任何字段
• $dirty 一個或多個字段已被修改
• $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 一個或多個字段已被修改
• ng-valid 表單內容有效
• ng-invalid 表單內容無效
• ng-valid-key 每次驗證一個密鑰。例如：ng-valid-required，當有多于一項必須驗證時非常有用
• ng-invalid-key 例如：ng-invalid-required

如果類代表的值為 false，則這些類將被刪除。