表单校验 Angular的校验器
- angular提供了一组预定义的校验器，这些校验器都是定义在angular的form模块中的Validators类中（required，minLength，maxLength，pattern校验器）
- 校验username，校验为必填，最小长度为6，获取校验结果，如够有一项不符合则为false，返回false时获取错误信息
username:['',[Validators.required,Validators.minLength(6)]],
let isValid:boolean=this.formModel.get("username").valid;
console.log('username校验结果：'+isValid);
let errors:any=this.formModel.get("username").errors;
console.log('username错误信息：'+JSON.stringify(errors));
自定义校验器
xxxx(control:AbstractControl):{[key:string]:any}{
return null;
}
- 定义一个验证手机的校验器mobileValidator，mobile字段的类型为FormControl，然后返回一个任意类型的对象，写一个正则表达式来校验手机号（校验手机号是否以13,15,18开头，同时限定长度），并在mobile字段中使用这个校验器，校验成功返回为null，失败返回为mobile：true（mobile是key）
mobileValidator(control:FormControl):any{
var myreg=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
let valid=myreg.test(control.value);
console.log("mobile校验结果"+valid);
return valid?null:{mobile:true};
}
mobile:['',this.mobileValidator],
-
每次改变手机号时这个方法都会被调用，检查当前的值是否为合法的
- 自定义一个重复密码校验器，校验两次输入的密码是否相同
equalValidator(group:FormGroup):any{
let password:FormControl=group.get("password") as FormControl;
let pconfirm:FormControl=group.get("pconfirm") as FormControl;
let valid:boolean=(password.value===pconfirm.value);
console.log("密码校验结果"+valid);
return valid?null:{equal:true};
passwordsGroup: fb.group({
password:[''],
pconfirm:[''],
},{validator:this.equalValidator})
- 校验器的方法不一定要写在组件中，它可以单独提取出去，写在一个单独的ts文件中，并通过export关键字将 其暴露出来，这样就可以将应用中通用的校验器写在一个文件中，在不同的组件中复用
- 在app文件夹下新建一个validator文件，并新建一个validators.ts文件用来存放校验器，将组剪切到这个文件中，这时它们不在是一个ts类中的方法了，而是全局的ts函数，用function声明再用export暴露出去
import {FormControl, FormGroup} from '@angular/forms';
export function mobileValidator(control:FormControl):any{
var myreg=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
let valid=myreg.test(control.value);
console.log("mobile校验结果"+valid);
return valid?null:{mobile:true};
}
export function equalValidator(group:FormGroup):any{
let password:FormControl=group.get("password") as FormControl;
let pconfirm:FormControl=group.get("pconfirm") as FormControl;
let valid:boolean=(password.value===pconfirm.value);
console.log("密码校验结果"+valid);
return valid?null:{equal:true};
}
- 这样实际上是声明了两个全局的方法，在组件中可以直接使用import引入这两个全局的方法后直接使用
校验响应式表单
- 校验失败时显示错误信息，使用.hasError方法，接收两个参数，第一个参数是希望校验的错误（required，不是校验器的名字，而是校验器失败时返回的对象的key），第二个字段是要检查的字段的名字，当username的required校验不通过时返回一个true，所以hidden要取反（当两个校验都不成功时，优先判断是否填写，因此只显示第一项信息）
<form [formGroup]="formModel" (submit)="onSubmit()">
<div>用户名：<input type="text" formControlName="username"></div>
<div [hidden]="!formModel.hasError('minlength','username')">
用户最小长度为6
</div>
<div [hidden]="!formModel.hasError('required','username')">
用户名是必填项
</div>
<div>手机号：<input type="number" formControlName="mobile"></div>
<div [hidden]="!formModel.hasError('mobile','mobile')">
请输入正确的mobile
</div>
<div formGroupName="passwordsGroup">
<div>密码：<input type="password" formControlName="password"></div>
<div>确认密码：<input type="password" formControlName="pconfirm"></div>
</div>
<div [hidden]="!formModel.hasError('equal','passwordsGroup')">
密码不匹配
</div>
<button type="submit">注册</button>
</form>
- 因为password字段是嵌套在passwordsGroup中的，所以在这个hasError方法中的第二个参数必须为一个数组，这个数组第一个数据为passwordsGroup第二个数据才是需要校验的字段password
- 校验器可以提供需要输出的错误信息，在校验器的错误返回中输入需要提示的信息{equal:{descxx:'密码不匹配'}}，再通过getError来获取
export function equalValidator(group:FormGroup):any{
let password:FormControl=group.get("password") as FormControl;
let pconfirm:FormControl=group.get("pconfirm") as FormControl;
let valid:boolean=(password.value===pconfirm.value);
console.log("密码校验结果"+valid);
return valid?null:{equal:{descxx:'密码不匹配'}};
}
<div formGroupName="passwordsGroup">
<div>密码：<input type="password" formControlName="password"></div>
<div>确认密码：<input type="password" formControlName="pconfirm"></div>
</div>
<div [hidden]="!formModel.hasError('equal','passwordsGroup')">
{{formModel.getError('equal','passwordsGroup')?.descxx}}
</div>
异步校验器
- Angular的API还支持一个特殊的校验器：异步校验器，可以用来调用远程的服务来检查表单的值，与普通的校验器类似，异步校验器也是一个方法，但是异步校验器返回的不是一个对象，而是一个可观测的流
- 在返回时将返回值放入一个流Observable.of中返回，使用delay延迟5秒返回模拟在服务器请求数据的效果，在输入手机号是完成了本地校验器的校验后，表单的状态会从INVALID变成PENDING 5秒钟，然后 变成VALID，PENDING状态就是调用远程的服务去校验当前的手机号，还不能确定是否正确
export function mobileAsvncValidator(control:FormControl):any{
var myreg=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
let valid=myreg.test(control.value);
console.log("mobile校验结果"+valid);
return Observable.of(valid?null:{mobile:true}).delay(5000);
}
mobile:['',mobileValidator,mobileAsvncValidator],
状态字段
- 在一开始初始化后用户名字段就是非法的，但是用户并没有访问 过这个字段，不应该显示这个错误信息给用户，为了解决这些问题angular提供了状态字段
- touched和untouched：用来判断用户是否访问过一个字段（也就是一个字段是否获取过焦点）
<div>用户名：<input type="text" formControlName="username"></div>
<div [hidden]="formModel.get('username').valid || formModel.get('username').untouched">
<div [hidden]="!formModel.hasError('required','username')">
用户名是必填项
</div>
<div [hidden]="!formModel.hasError('minlength','username')">
用户最小长度为6
</div>
</div>
- pristine和dirty：如果一个字段的值没有被改变过pristine为true
- pending：当一个字段处于异步校验时，字段的pending属性为true
<div>手机号：<input type="number" formControlName="mobile"></div>
<div [hidden]="!formModel.get('mobile').pending">
正在校验手机号合法性
</div>
- 状态字段还可以用于绑定css样式，这个字段无效并且被访问过时会修改为这个样式
<div>用户名：<input [class.hasError]="formModel.get('username').invalid && formModel.get('username').touched" type="text" formControlName="username">
</div>
