Angular 开发小妙招1:提交表单数据验证不通过,更改输入组件的样式
2018-10-12 16:38
881 查看
开发表单时,客户端数据完整性校验是必不可少的,在jquery 时代出现了无数的数据验证插件也很好用,开发Angular 应用时,angular 内置了一些常用的数据验证指令。今天要讲的不是这些指令如何使用,今天讲什么呢,今天讲一些关于验证样式的问题,相关的基础知识在angular.cn 官方文档中都有介绍,在此就不多说了。但还有一些小的易用性方面的没有在文档中指出。
比如:设置了必填后 (就是在input 中增加 required 属性),表单加载完毕后,还没有做任何操作时(无任何的键盘及鼠标操作),input 控件自动的改变了样式,比如红色边框,而我想着是在input 失去焦点后在添加红色的边框,这种情况咋搞呢,经过细致的参考官方文档,我们可以设置样式来达到这个效果,如:
.form-control.ng-invalid.ng-touched { border-color: red; }
ng-invalid: 数据验证不通过时添加的样式名
ng-touched:失去焦点后添加的样式名
添加以上样式后,只有当input 失去焦点并且数据验证不通过时边框的颜色 才会为红色。
如果表单加载完成后,我们直接点击提交按钮会怎样呢,假设我们的提交代码如下
public btnSubmit() { if ( this.frm.valid ) { ...... } }
此时表单的验证状态肯定是false , 数据验证失败,而控件上又没有提示,怎么办? 通过查看浏览器源代码发现input 中没有ng-touched 样式,如何添加上这个呢?各种百度 google 后得出,需要循环from 中的所有control,并调用每个control的markAsTouched 方法 代码大至如下:
public btnSubmit() { Object.values( this.frm.controls).forEach( (c:FormControl) => c.markAsTouched()); // 添加这一句后,验证失败的input 会添加 ng-touched 样式,控件的边框就会变红了 if ( this.frm.valid ) { ...... } }
没啥高深的内容,废话有点多,就这样吧
相关文章推荐
- Angular2组件开发—表单输入(二)
- Angular2组件开发—表单输入(五)
- vue组件表单数据回显验证及提交的实例代码
- PHP表单提交数据 - 自动验证合法性
- Rational Functional Tester Proxy SDK 开发,第 3 部分: 使用 Proxy SDK 扩展 Java GUI 组件可捕获的验证数据
- Angular开发(六)-关于组件之间的数据交互
- Jqueruy验证 form表单提交之前的中的数据
- Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件。一般来讲, view负责把数据展示给用户,也处理用户的输入。为了获得更多的灵性性,交互通过d
- 35-001-4 Struts中的表单数据输入的验证问题
- jquery.validate验证表单,自己的js提交数据,返回json
- 原生js实现表单的正则验证,所有验证都通过后提交按钮才可用
- form表单通过GET提交的数据自动生成的链接地址如何伪静态化处理
- Jquery 实现表单验证,所有验证通过方可提交
- 通过表单提交数据,完成文件上传代码
- jQuery实现所有验证通过方可提交的表单验证
- Angular Material表单提交及验证
- 自由表单设计器,字段数据输入js验证发布说明
- 提交表单报400错误,提示 “您提交的数据无法验证”
- angular中的表单数据自定义验证
- 通过jquery的serializearray处理表单数据成json格式,并提交到后台处理