频道导航

angular4中关于表单的校验示例

2019-01-07 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了angular4中关于表单的校验示例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过。

一、使用响应式表单的步骤

1、在模块(一般是app.module.ts)中引入ReactiveFormsModule 2、在组件的ts文件中使用响应式表单

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、自定义表单校验器(其实就一个函数,函数的参数是当前需要校验的行,返回一个任意对象)

}

3、响应式表单字段中可以写三个值,第一个是返显到页面上的,第二个参数是校验器(可以是一组),第三个参数异步校验(常见判断手机号码,用户名是否重复注册)

三、自定义一个校验方法的步骤

1、把项目中需要用的校验器单独写一个文件

自定义验证器(其实就是一个函数,一个返回任意对象的函数) * 传递的参数是当前需要验证的表单的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、使用自己定义的校验器

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、使用