W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

AngularJS form 指令



Example

只要所需的输入字段为空,此表单的“有效状态”将不会被视为“True”:

<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 提交表单

每个状态的值表示一个布尔值,为 truefalse

如果未指定 action 属性,AngularJS 中的表单将阻止将表单提交到服务器的默认操作。


语法

<form name="formname"></form>

使用 name 属性的值来引用表单。


CSS类

AngularJS 应用程序中的表单被赋予某些classes 。 这些类可以根据他们的状态使用样式。

可添加的类如下:

  • ng-pristine 没有字段尚未修改
  • ng-dirty 一个或多个字段已被修改
  • ng-valid 表单内容有效
  • ng-invalid 表单内容无效
  • ng-valid-key 每个验证的一个键
  • ng-invalid-key 实例:ng-invalid-required

如果它们表示的值为 false,那么这些类将被删除。

Example

为未修改(原始)表单和修改形式应用样式:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
尝试一下 »