Angular Form表单的属性和类

好好学习,天天向上!

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

Form对象属性

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

使用方法:

1 2 3 4

<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 表单被动过之后拥有

使用方法:

1 2 3 4 5 6

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

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

Github参考代码

angular官方文档

Github博客参考