素材巴巴 > 程序开发 >

Angularjs中input的指令和属性

程序开发 2023-09-04 17:42:03

建议添加 novalidate属性(可无值)到form标签上,这样可以保证在表单不合法的情况下阻止浏览器继续提交数据。

可以给表单元素 input 添加 required 属性(可无值),让该表单成为必填项,如:

Angularjs中表单最常用的就是用 ng-model 属性进行双向绑定了。用 ng-model 绑定数据后,可以时时的和数据进行交互。

 

使用 ng-model 属性进行绑定的表单,会自动的添加一些 class 样式,如:

非必填表单

初始化时会添加 .ng-pristine 和 .ng-valid 两个class样式。当表单为非空时 class 样式会变成 .ng-valid 和 .ng-dirty 。其中将 .ng-pristine 变成了 .ng-dirty 。

 

必填表单

初始化时会添加 .ng-pristine 、.ng-invalid 和 .ng-invalid-required 三个class样式。当表单为非空时 class 样式会变成 .ng-dirty 、.ng-valid 和 .ng-valid-required 。

以上 class 样式还只是针对默认的input(即type=text的input),像那些特殊意义的 input ,如:type=email、type=number等。其 class 样式的种类会更多。

 

Angular input最小长度

Angular input最大长度

Angular表单匹配正则表达式

 

AngularJS通过DOM元素上设置一个表单,从而使我们可以很容易的获取到当前 $scope 对象的属性。

判断表单未修改

复制代码
复制代码

运行以上代码,formName.name.$pristine 会返回一个布尔值。

因为 formName 是当前域(test)中 $scope 对象的属性,所以我们也可以用如下方法来获取 $pristine 值,以查看值是否有改变。如:

复制代码
复制代码

如下一些属性与 $pristine 属性类似,如 $dirty、$valid等。

判断表单修改过 $dirty 属性。

判断表单合法 $valid 属性。

判断表单非法 $invalid 属性。

 

判断表单错误 $error 属性。如果某个验证失败,则这个属性返回true,相反如果这个属性为false,则代表验证通过。

$error 属性是一个非常有用的属性,如:

复制代码
复制代码

如果 $error 是获取 type=email 的属性,则会返回这样一个对象:Object {required: true, email: false} ,其中返回的对象包含一个 required 和 email 属性。如果是获取 type=number 的属性则对象包含的属性则是 required 和 number 。


标签:

上一篇: Vue中如何获取滚动条滚动的距离 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。