二、使用表单校验数据
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"感谢各位的阅读！关于“angular4中关于表单校验的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
当前题目：angular4中关于表单校验的示例分析
分享URL：http://bjjierui.cn/article/ihdhic.html
