AngularJS form 指令

定义和用法

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

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

表单具有以下状态:

  • $pristine尚未修改任何字段
  • $dirty一项或多项已被修改
  • $invalid 表单内容无效
  • $valid 表单内容有效
  • $submitted 表单提交

每个状态的值代表一个布尔值,可以是truefalse。 p>

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


语法

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

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



CSS 类

AngularJS 应用程序中的表单被赋予特定的。这些类可用于根据其状态设置表单样式。

添加了以下类:

  • ng-pristine 没有字段尚未修改
  • ng-dirty一个或多个字段被修改
  • ng-valid 表单内容有效
  • ng-invalid 表单内容无效
  • ng-valid-key 每个验证一个 key。 示例:ng-valid-required,当有多个必须验证的东西时很有用
  • ng-invalid-key 示例:ng-invalid-required

如果类表示的值为 false,则删除这些类。

实例

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

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