AngularJS form 指令

实例

只要所需的输入字段为空，此表单的 "valid state" 有效状态将不被视为 "true":

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="">
<p>尝试在输入字段中写入:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required="">
</form>
<p>表单的有效状态为:</p>
<h2>{{myForm.$valid}}</h2>
<p>输入字段是必需的，因此只要值为空，表单的有效状态就不会变为真。</p>
</body>
</html>

运行一下

定义与用法

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

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

表单有以下几种状态:

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

每个状态的值都代表一个布尔值，可以是 true，也可以是 false。

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

语法

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

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

CSS 样式类

AngularJS 应用程序中的表单被赋予某些 classes 类。这些类可用于根据窗体的状态设置窗体的样式。

添加了以下类:

ng-pristine 尚未修改任何字段
ng-dirty 一个或多个字段已被修改
ng-valid 表单内容有效
ng-invalid 表单内容无效
ng-valid-key 每次验证一个键，示例：ng-valid-required，在需要验证多个内容时非常有用
ng-invalid-key Example: ng-invalid-required

如果样式类所表示的值为 false，则会删除这些类。

实例

将样式应用于未修改（原始）表单和已修改表单:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<style>
form.ng-pristine {
    background-color:lightblue;
}
form.ng-dirty {
    background-color:pink;
}
</style>
<body ng-app="">
<form name="myForm">
<p>尝试在输入字段中写入:</p>
<input name="myName" ng-model="myName" required="">
<p>当表单被修改时，表单会得到一个 "ng-dirty" 类，因此会变成粉红色。</p>
</form>
</body>
</html>

运行一下

AngularJS form 指令

实例

定义与用法

语法

CSS 样式类

实例

分类导航