表单校验 Angular的校验器

1. angular提供了一组预定义的校验器，这些校验器都是定义在angular的form模块中的Validators类中（required，minLength，maxLength，pattern校验器）
2. 校验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;
}

1. 定义一个验证手机的校验器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],

2. 每次改变手机号时这个方法都会被调用，检查当前的值是否为合法的

   
   
3. 自定义一个重复密码校验器，校验两次输入的密码是否相同

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})

4. 校验器的方法不一定要写在组件中，它可以单独提取出去，写在一个单独的ts文件中，并通过export关键字将 其暴露出来，这样就可以将应用中通用的校验器写在一个文件中，在不同的组件中复用
5. 在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};

}

6. 这样实际上是声明了两个全局的方法，在组件中可以直接使用import引入这两个全局的方法后直接使用

---

校验响应式表单

1. 校验失败时显示错误信息，使用.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>

2. 因为password字段是嵌套在passwordsGroup中的，所以在这个hasError方法中的第二个参数必须为一个数组，这个数组第一个数据为passwordsGroup第二个数据才是需要校验的字段password
3. 校验器可以提供需要输出的错误信息，在校验器的错误返回中输入需要提示的信息{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>

---

异步校验器

1. Angular的API还支持一个特殊的校验器：异步校验器，可以用来调用远程的服务来检查表单的值，与普通的校验器类似，异步校验器也是一个方法，但是异步校验器返回的不是一个对象，而是一个可观测的流
2. 在返回时将返回值放入一个流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],

---

状态字段

1. 在一开始初始化后用户名字段就是非法的，但是用户并没有访问 过这个字段，不应该显示这个错误信息给用户，为了解决这些问题angular提供了状态字段
2. 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>

3. pristine和dirty：如果一个字段的值没有被改变过pristine为true
4. pending：当一个字段处于异步校验时，字段的pending属性为true

<div>手机号：<input type="number" formControlName="mobile"></div>

<div [hidden]="!formModel.get('mobile').pending">
  正在校验手机号合法性
</div>

5. 状态字段还可以用于绑定css样式，这个字段无效并且被访问过时会修改为这个样式

<div>用户名：<input [class.hasError]="formModel.get('username').invalid && formModel.get('username').touched" type="text" formControlName="username">
</div>

---