AngularJS form 指令

AngularJS 参考手册

定义和用法

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，则这些类将被删除。

AngularJS 参考手册