angular预定义好的检验器
angular预定义好的检验器位于forms模块中的Validators中，常见校验器如下：
自定义校验器
自定义一个方法，该方法必须具有一个AbstractControl类型的参数，却必须要有一个返回值，返回值为任意结构的对象，但对象的key必须为string类型，值可为任意类型。
xxxxx(control：AbstractControl)：{[key:string]:any}{
}
实战一：自定义FormControl检验器
模板代码
<div>电话：<input formControlName="telphone" type="number"></div>
控制器代码 自定义一个电话号码校验器mobileValidator
mobileValidator(control: FormControl): any {
let myreg = /^1(3|4|5|7|8)\d{9}$/;
let valid = myreg.test(control.value);
console.log('mobile的校验结果是：' + valid);
return valid ? null : {mobile: true};
}
}
使用自定义电话号码校验器
telphone: ['', this.mobileValidator]
实战二：自定义FormGroup检验器
模板代码
<div formGroupName="passwords">
<div>密码：<input formControlName="password" type="password"></div>
<div>确认密码：<input formControlName="password1" type="password"></div>
</div>
控制器代码 自定义密码检验器，要求密码和确认密码两个字段相同。
passwordValidator(formGroup: FormGroup): any {
let password: FormControl = formGroup.get('password') as FormControl;
let password1: FormControl = formGroup.get('password1') as FormControl;
let valid: boolean = (password.value === password1.value);
console.log('密码校验结果是：' + valid);
return valid ? null : {passwordEqual: true};
}
使用自定义密码校验器 {validator: this.passwordValidator}
passwords: this.fb.group({
password: [''],
password1: ['']
}, {validator: this.passwordValidator})
实战三：提取检验规则到单独文件
新建validator文件夹，新建validators.ts文件。 在validators.ts文件中按以下格式编写校验规则：export fuction 自定义校验方法
export function 检验方法名（）{
}
export function mobileValidator(control: FormControl): any {
let myreg = /^1(3|4|5|7|8)\d{9}$/;
let valid: boolean = myreg.test(control.value);
console.log('mobile的校验结果是：' + valid);
return valid ? null : {mobile: true};
}
使用校验器
使用一个FormControl检验器
userName: ['', Validators.required]
userName: ['', 检验器]
使用多个FormControl检验器
userName: ['', [Validators.required, Validators.maxLength(36)]]
userName: ['', [检验器一, 检验器二,...]]
使用FormGroup检验器 {validator: this.passwordValidator}
passwords: this.fb.group({
password: [''],
password1: ['']
}, {validator: this.passwordValidator})
获取校验结果
获取表单元素合法性 this.formModel.get('userName').valid
let isValid: boolean = this.formModel.get('userName').valid;
console.log('userName的校验结果：' + isValid);
获取表单元素错误信息 this.formModel.get('userName').errors
let errors: any = this.formModel.get('userName').errors;
console.log('userName的错误信息是：' + JSON.stringify(errors));
获取表单合法合法性： this.formModel.valid
let formValid: boolean = this.formModel.valid;
console.log('表单的校验结果：' + formValid);
显示错误信息
<div [hiden]="!formModell.hasError('required','formCOntrolName的值')">...</div>
<div [hiden]="!formModell.hasError('放回值key的值')">...</div>
<div [hiden]="!formModell.hasError('required',['passwordsGroup','password'])">...</div>
<div [hiden]="!formModell.hasError('required',['一级容器','二级容器'])">...</div>
['passwordsGroup','password']
key的值。只要有值代表校验失败
检验器提供错误信息 返回值{equal:{descxxx：“错误信息”}}
异步校验器 返回值为一个流
return Observable.of(valid ? null:{moblie:true}).delay(5000);
获取表单状态 pedding状态等待验证
状态字段
touched和untouched 用户是否访问过这个字段，是否获取过焦点 获取过焦点时： touched=ture untouched=false [hidden]=formModel.get('userName').valid || formModel.get('user').untouched
pristine和dirty 字段值是否改变过 未改变过 ptistine=ture；dirty=false [hidden]=formModel.get('userName').valid || formModel.get('user').dirty
pending 用于异步检验，正在校验时pending=ture [hidden]=formModel.get('userName').valid || formModel.get('user').pending
angular会自动根据字段的状态为字段添加一些样式 自定义样式 ng-pending ng-touched ng-invalid
.ng-invalid{
border:red;
}
.has-error{
}
检验响应式表单
检验模板式表单 将检验方法包装成一个指令 自定义指令 ng g directive directives/mobileValidatorDirector
providers：[{provide:NG_VALIDATORS,useValue:mobileValidator,multi:true}]
一个token下可以挂多个值
required minlength="6" 使用novalidate禁止浏览器默认的表单校验
获取表单有效状态 myForm.valid
获取表单校验结果 myForm.form.hasError
获取字段状态