这次给大家带来angular4关于表单校验步奏详解，angular4关于表单校验的注意事项有哪些，下面就是实战案例，一起来看一下。
本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过。
一、使用响应式表单的步骤
1、在模块(一般是app.module.ts)中引入ReactiveFormsModule
2、在组件的ts文件中使用响应式表单
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';export class ReactiveFormComponent implements OnInit { private myForm: FormGroup; constructor(private fb: FormBuilder) { this.createForm(); } ngOnInit() { } // 创建表单元素 createForm() { this.myForm = this.fb.group({ username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]], mobile: ['', [Validators.required]], password: this.fb.group({ pass1: [''], pass2: [''] }) }); } // 提交表单函数 postDate() { /** * valid:是否有效 * invalid:无效 * dirty:脏 * status:状态 * errors:显示错误 */ if(this.myForm.valid){ console.log(this.myForm.value); } }}
登录后复制
3、在组件的html页面中使用
登录后复制
二、使用表单校验数据
1、angular中自带了三个常见的表单校验的是在Validators中的required,minLength,maxLength
2、自定义表单校验器(其实就一个函数,函数的参数是当前需要校验的行,返回一个任意对象)
**格式**export function fnName(control:FormControl|FormGroup):any{}
登录后复制
3、响应式表单字段中可以写三个值,第一个是返显到页面上的,第二个参数是校验器(可以是一组),第三个参数异步校验(常见判断手机号码,用户名是否重复注册)
三、自定义一个校验方法的步骤
1、把项目中需要用的校验器单独写一个文件
import { FormControl, FormGroup } from '@angular/forms';/** * 自定义验证器(其实就是一个函数,一个返回任意对象的函数) * 传递的参数是当前需要验证的表单的FormControl * 通过传递的参数获取当前表单输入的值 */export function mobileValidator(control: FormControl): any { console.dir(control); // 获取到输入框的值 const val = control.value; // 手机号码正则 const mobieReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+d{8})$/; const result = mobieReg.test(val); return result ? null : { mobile: { info: '手机号码格式不正确' } };}
登录后复制
2、使用自己定义的校验器
createForm() { this.myForm = this.fb.group({ username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]], mobile: ['', [Validators.required, mobileValidator]], password: this.fb.group({ pass1: [''], pass2: [''] }) });}
登录后复制
3、定义一个密码组的校验
// 定义一个密码组的验证方法export function passValidator(controlGroup: FormGroup): any { // 获取密码输入框的值 const pass1 = controlGroup.get('pass1').value as FormControl; const pass2 = controlGroup.get('pass2').value as FormControl; console.log('你输入的值:', pass1, pass2); const isEqule: boolean = (pass1 === pass2); return isEqule ? null : { passValidator: { info: '两次密码不一致' } };}
登录后复制
4、使用
createForm() { this.myForm = this.fb.group({ username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]], mobile: ['', [Validators.required, mobileValidator]], password: this.fb.group({ pass1: [''], pass2: [''] }, {validator: passValidator}) });}
登录后复制
四、关于前端页面中错误的显示
1、页面显示错误
用户名必填的
用户名长度过短
用户名长度太长
{{myForm.getError('mobile', 'mobile')?.info}}
{{myForm.getError('passValidator','password')?.info}}
登录后复制
2、定义样式文件
.ng-touched:not(form),.ng-invalid:not(form) { border: 1px solid #f00;}.ng-valid:not(form),.ng-untouched:not(form) { border: 1px solid #ddd;}p{ color:#f00;}
登录后复制
五、自定义class显示错误
1、在input输入框上写上
表示该字段无效且触碰过就添加这个class=”error”
[class.error]="myForm.get('username').invalid && myForm.get('username').touched"
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Vue中computed属性的使用方法
原生ajax的get和post方法使用详解
以上就是angular4关于表单校验步奏详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2771405.html
