一、使用Angular自带的表单校验器
//react-regist.html
<form [formGroup]="formModel" (submit)="onSubmit()">
<div>电话：<input formControlName="mobile" type="text" name="mobile"/></div>
<div>用户名:<input formControlName="username" type="text" name="username"/></div>
<div formGroupName="passwordsGroup">
<div>密码：<input formControlName="password" type="password" name="password"/></div>
<div>确认密码:<input formControlName="confirmPass" type="password" name="confirmPass"/></div>
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
//react-regist.ts
import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-react-regist',
templateUrl: './react-regist.component.html',
styleUrls: ['./react-regist.component.css']
})
export class ReactRegistComponent implements OnInit {
//这里是一个Angular的校验器
xxxx(control: AbstractControl): { [key: string]: any } {
return null;
}
formModel: FormGroup;
constructor(fb: FormBuilder) {
this.formModel = fb.group({
mobile: ['18249666846'],
username: ['xiaoming', [Validators.required, Validators.minLength(6)]],
passwordsGroup: fb.group({
password: [''],
confirmPass: ['']
})
});
}
ngOnInit() {
}
onSubmit() {
let isVaild: boolean = this.formModel.get('username').valid;
console.log('username的校验结果是：' + isVaild);
let errors: any = this.formModel.get('username').errors;
console.log('username的错误信息是：' + JSON.stringify(errors));
console.log(this.formModel.value);
}
}
运行结果：
运行结果1.png
运行结果2.png
二、自定义表单校验器
//修改react-regist.component.ts完成一个手机号验证器
import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-react-regist',
templateUrl: './react-regist.component.html',
styleUrls: ['./react-regist.component.css']
})
export class ReactRegistComponent implements OnInit {
mobileValidator(control: FormControl): any {
var mobileReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
let vaild = mobileReg.test(control.value);
console.log('mobile的校验结果是：' + vaild);
return vaild ? null : {mobile: true};
}
formModel: FormGroup;
constructor(fb: FormBuilder) {
this.formModel = fb.group({
mobile: ['', this.mobileValidator],
username: ['', [Validators.required, Validators.minLength(6)]],
passwordsGroup: fb.group({
password: [''],
confirmPass: ['']
})
});
}
ngOnInit() {
}
onSubmit() {
let isVaild: boolean = this.formModel.get('username').valid;
console.log('username的校验结果是：' + isVaild);
let errors: any = this.formModel.get('username').errors;
console.log('username的错误信息是：' + JSON.stringify(errors));
console.log(this.formModel.value);
}
}
运行结果3.png
//修改react-regist.component.ts完成一个密码验证器
import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-react-regist',
templateUrl: './react-regist.component.html',
styleUrls: ['./react-regist.component.css']
})
export class ReactRegistComponent implements OnInit {
mobileValidator(control: FormControl): any {
var mobileReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
let vaild = mobileReg.test(control.value);
console.log('mobile的校验结果是：' + vaild);
return vaild ? null : {mobile: true};
}
equalValidator(group: FormGroup): any {
let password: FormControl = group.get('password') as FormControl;
let confirmPass: FormControl = group.get('confirmPass') as FormControl;
let vaild = (password.value === confirmPass.value);
console.log('密码校验结果是：' + vaild);
return vaild ? null : {equal: true};
}
formModel: FormGroup;
constructor(fb: FormBuilder) {
this.formModel = fb.group({
mobile: ['', this.mobileValidator],
username: ['', [Validators.required, Validators.minLength(6)]],
passwordsGroup: fb.group({
password: [''],
confirmPass: ['']
}, {validator: this.equalValidator})
});
}
ngOnInit() {
}
onSubmit() {
let isVaild: boolean = this.formModel.get('username').valid;
console.log('username的校验结果是：' + isVaild);
let errors: any = this.formModel.get('username').errors;
console.log('username的错误信息是：' + JSON.stringify(errors));
console.log(this.formModel.value);
}
}
运行结果4.png
当然我们也可以将验证器方法独立出来
//新建目录validator，新建validators.ts
import {FormControl, FormGroup} from '@angular/forms';
export function mobileValidator(control: FormControl): any {
var mobileReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
let vaild = mobileReg.test(control.value);
console.log('mobile的校验结果是：' + vaild);
return vaild ? null : {mobile: true};
}
export function equalValidator(group: FormGroup): any {
let password: FormControl = group.get('password') as FormControl;
let confirmPass: FormControl = group.get('confirmPass') as FormControl;
let vaild = (password.value === confirmPass.value);
console.log('密码校验结果是：' + vaild);
return vaild ? null : {equal: true};
}
//validators.ts
import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {equalValidator, mobileValidator} from '../validator/validators';
@Component({
selector: 'app-react-regist',
templateUrl: './react-regist.component.html',
styleUrls: ['./react-regist.component.css']
})
export class ReactRegistComponent implements OnInit {
formModel: FormGroup;
constructor(fb: FormBuilder) {
this.formModel = fb.group({
mobile: ['', mobileValidator],
username: ['', [Validators.required, Validators.minLength(6)]],
passwordsGroup: fb.group({
password: [''],
confirmPass: ['']
}, {validator: equalValidator})
});
}
ngOnInit() {
}
onSubmit() {
if (this.formModel.valid) {
//只有当全部验证通过时才打印结构
console.log(this.formModel.value);
}
}
}
使用hasError()在模版中显示
<form [formGroup]="formModel" (submit)="onSubmit()">
<div>用户名:<input formControlName="username" type="text" name="username"/></div>
<div style="color: red" [hidden]="!formModel.hasError('required','username')">
用户名是必填项
</div>
<div style="color: red" [hidden]="!formModel.hasError('minlength','username')">
用户名最小长度是6位
</div>
<div>电话：<input formControlName="mobile" type="text" name="mobile"/></div>
<div style="color: red" [hidden]="!formModel.hasError('mobile','mobile')">
请输入正确的手机号码
</div>
<div formGroupName="passwordsGroup">
<div>密码：<input formControlName="password" type="password" name="password"/></div>
<div>确认密码:<input formControlName="confirmPass" type="password" name="confirmPass"/></div>
<div style="color: red" [hidden]="!formModel.hasError('equal','passwordsGroup')">
密码和确认密码不匹配！
</div>
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
运行结果：
运行结果1.png
运行结果2.png
运行结果3.png
//修改react-regist.component.html密码验证
<div formGroupName="passwordsGroup">
<div>密码：<input formControlName="password" type="password" name="password"/></div>
<div style="color: red" [hidden]="!formModel.hasError('minlength',['passwordsGroup','password'])">
密码最小长度是6位
</div>
<div>确认密码:<input formControlName="confirmPass" type="password" name="confirmPass"/></div>
<div style="color: red" [hidden]="!formModel.hasError('equal','passwordsGroup')">
密码和确认密码不匹配！
</div>
</div>
//react-regist.component.ts修改
this.formModel = fb.group({
mobile: ['', mobileValidator],
username: ['', [Validators.required, Validators.minLength(6)]],
passwordsGroup: fb.group({
password: ['', Validators.minLength(6)],
confirmPass: ['']
}, {validator: equalValidator})
});
修改错误信息的返回方式
//修改react-regist.component.html密码验证
<div formGroupName="passwordsGroup">
<div>密码：<input formControlName="password" type="password" name="password"/></div>
<div style="color: red" [hidden]="!formModel.hasError('minlength',['passwordsGroup','password'])">
密码最小长度是6位
</div>
<div>确认密码:<input formControlName="confirmPass" type="password" name="confirmPass"/></div>
<div style="color: red" [hidden]="!formModel.hasError('equal','passwordsGroup')">
{{formModel.getError('equal','passwordsGroup')?.desc}}
</div>
</div>
//修改validator.ts
export function equalValidator(group: FormGroup): any {
let password: FormControl = group.get('password') as FormControl;
let confirmPass: FormControl = group.get('confirmPass') as FormControl;
let vaild = (password.value === confirmPass.value);
console.log('密码校验结果是：' + vaild);
return vaild ? null : {equal: {desc:'两次密码输入不一致'}};
}
三、异步校验器
//validator.ts
import {FormControl, FormGroup} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
export function mobileValidator(control: FormControl): any {
var mobileReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
let vaild = mobileReg.test(control.value);
console.log('mobile的校验结果是：' + vaild);
return vaild ? null : {mobile: true};
}
export function mobileAnsyValidator(control: FormControl): any {
var mobileReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
let vaild = mobileReg.test(control.value);
console.log('mobile的校验结果是：' + vaild);
return Observable.of(vaild ? null : {mobile: true}).delay(5000);
//这里用延时5s来模拟服务器返回
}
export function equalValidator(group: FormGroup): any {
let password: FormControl = group.get('password') as FormControl;
let confirmPass: FormControl = group.get('confirmPass') as FormControl;
let vaild = (password.value === confirmPass.value);
console.log('密码校验结果是：' + vaild);
return vaild ? null : {equal: {desc: '两次密码输入不一致'}};
}
//react-regist.component.ts
import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {equalValidator, mobileAnsyValidator, mobileValidator} from '../validator/validators';
@Component({
selector: 'app-react-regist',
templateUrl: './react-regist.component.html',
styleUrls: ['./react-regist.component.css']
})
export class ReactRegistComponent implements OnInit {
formModel: FormGroup;
constructor(fb: FormBuilder) {
this.formModel = fb.group({
mobile: ['', mobileValidator, mobileAnsyValidator],
username: ['', [Validators.required, Validators.minLength(6)]],
passwordsGroup: fb.group({
password: ['', Validators.minLength(6)],
confirmPass: ['']
}, {validator: equalValidator})
});
}
ngOnInit() {
}
onSubmit() {
// let isVaild: boolean = this.formModel.get('username').valid;
// console.log('username的校验结果是：' + isVaild);
//
// let errors: any = this.formModel.get('username').errors;
// console.log('username的错误信息是：' + JSON.stringify(errors));
if (this.formModel.valid) {
//只有当全部验证通过时才打印结构
console.log(this.formModel.value);
}
}
}
//react-regist.component.html
<form [formGroup]="formModel" (submit)="onSubmit()">
<div>用户名:<input formControlName="username" type="text" name="username"/></div>
<div style="color: red" [hidden]="!formModel.hasError('required','username')">
用户名是必填项
</div>
<div style="color: red" [hidden]="!formModel.hasError('minlength','username')">
用户名最小长度是6位
</div>
<div>电话：<input formControlName="mobile" type="text" name="mobile"/></div>
<div style="color: red" [hidden]="!formModel.hasError('mobile','mobile')">
请输入正确的手机号码
</div>
<div formGroupName="passwordsGroup">
<div>密码：<input formControlName="password" type="password" name="password"/></div>
<div style="color: red" [hidden]="!formModel.hasError('minlength',['passwordsGroup','password'])">
密码最小长度是6位
</div>
<div>确认密码:<input formControlName="confirmPass" type="password" name="confirmPass"/></div>
<div style="color: red" [hidden]="!formModel.hasError('equal','passwordsGroup')">
{{formModel.getError('equal','passwordsGroup')?.desc}}
</div>
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
<div>
{{formModel.status}}
</div>
运行结果：
初始值为INVALID.png
状态为pending.png
5s之后返回验证结果.png
