AngularJS form 指令

定义和用法

AngularJS 修改 <form> 元素的默认行为。

AngularJS 应用程序内的表单被赋予了某些属性。这些属性描述了表单的当前状态。

表单有以下状态：

• $pristine 尚未修改任何字段
• $dirty Ang isang o higit pang mga bagay ay binago
• $invalid Ang nilalaman ng form ay hindi wasto
• $valid Ang nilalaman ng form ay wasto
• $subscribed 表单已提交

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

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

实例

例子 1

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

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

Subukan nang personal

例子 2

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

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

Subukan nang personal

Grammar

<form name="formname</form>

sa pamamagitan ng paggamit ng name sa halagang ng atributo upang tumukoy sa form.

Mga klase ng CSS

Ang form sa loob ng application ng AngularJS ay may ilang klase. Ang mga klase na ito ay maaaring gamitin upang itakda ang estilo ng form ayon sa kanyang estado.

Nadagdag ang mga sumusunod na klase:

• ng-pristine Wala pang bagay na hindi binago
• ng-dirty Ang isang o higit pang mga bagay ay binago
• ng-valid Ang nilalaman ng form ay wasto
• ng-invalid Ang nilalaman ng form ay hindi wasto
• ng-valid-key Mag-verifika ng bawat susi. Halimbawa:ng-valid-requiredkaya ito ay napaka-mahalaga kapag mayroong higit sa isang bagay na dapat verifika.
• ng-invalid-key Halimbawa:ng-invalid-required

Kung ang halaga ng klase ay falsekaya ang mga klase na ito ay burahin.