Angular Form Property And Class

好好学习,天天向上!

form 的相关方法要生效，必须为 form 标签指定 name 和 ng-controller,并且每个控件都要绑定一个变量。
form 和控件的名字，即是 $scope 中的相关实例的引用变量名。

Form对象属性

$pristine 表单是否未被动过
$dirty 表单是否被动过
$valid 表单是否验证通过
$invalid 表单是否验证失败
$error 表单的验证错误( key是失败信息,像required,minlength…… value是对应的字段实例列表。这里的失败信息是按序列取的一个)

使用方法:

<form name="test_form" ng-controller="TestCtrl">
    <input type="text" name="a" required ng-model="a"  />
    <span>{{ test_form.$valid }}</span>
</form>

Form标签特定的class属性

除去对象的方法与属性， form 这个标签本身有一些class可以使用：
ng-valid 当表单验证通过时的设置
ng-invalid 当表单验证失败时的设置
ng-pristine 表单的未被动之前拥有
ng-dirty 表单被动过之后拥有

使用方法:

input.ng-invalid {
    border: 1px solid red;
}
input.ng-valid {
    border: 1px solid green;
}

加上两种class的css,input边框在验证通过的时候是绿色,不通过则是红色。

Github参考代码

angular官方文档

2016-10-08