AngularJS form
指令
示例
只要必需的输入字段为空,此表单的“有效状态”就不会被视为“true”。
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>表单的有效状态是:</p>
<h1>{{myForm.$valid}}</h1>
自己动手试一试 »
定义和用法
AngularJS 修改了 <form>
元素的默认行为。
AngularJS 应用程序中的表单具有某些属性。这些属性描述了表单的当前状态。
表单具有以下状态:
$pristine
尚未修改任何字段$dirty
已修改一个或多个字段$invalid
表单内容无效$valid
表单内容有效$submitted
表单已提交
每个状态的值表示一个布尔值,可以是 true
或 false
。
AngularJS 中的表单会阻止默认行为,即如果未指定 action 属性,则将表单提交到服务器。
语法
<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
,则这些类将被移除。
示例
为未修改(pristine)的表单和已修改的表单应用样式
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
自己动手试一试 »