AngularJS form 指令

定义和用法

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

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

表单具有以下状态：

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

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

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

语法

<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，则将其删除。

示例

下例演示了将样式应用于未修改的（原始）表单和已修改的表单：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<style>
   form.ng-pristine {
     background-color: lightblue;
   }
   form.ng-dirty {
      background-color: pink;
   }
</style>
</head>
<body ng-app="">
    <form name="myForm">
        <p>尝试在输入字段中编写：</p>
        <input name="myName" ng-model="myName" required>
        <p>修改表单后，该表单将获得“ng-dirty”类，因此将变为粉红色。</p>
    </form>

</body>
</html>

尝试一下

定义和用法

语法

CSS 类

示例

相关页面