5表单校验上

test() 方法用于检测一个字符串是否匹配某个模式.
目标
Angular的校验器：普通的方法
校验响应式表单
校验模板式表单

一、使用表单校验数据

1、angular中自带了三个常见的表单校验的是在Validators中的required,minLength,maxLength
2、自定义表单校验器(其实就一个函数,函数的参数是当前需要校验的行,返回一个任意对象)

格式

（1） xxx(control: AbstractControl): {[key: string]: any} {
    return null;
  }
（2）export function fnName(control:FormControl|FormGroup):any{

3、响应式表单字段中可以写三个值,第一个是返显到页面上的,第二个参数是校验器(可以是一组),第三个参数异步校验(常见判断手机号码,用户名是否重复注册)

演示例子：用户名的验证

export class ReactiveRegistComponent implements OnInit {
  formModel: FormGroup;
  /*方法*/
  xxx(control: AbstractControl): {[key: string]: any} {
    return null;
  }
  constructor(fb: FormBuilder) {
    this.formModel = fb.group({
     /* username: new FormControl(),*/
     username: ['', [Validators.required,  Validators.minLength(6)]], /*必填，最长6*/
      mobile: [''],
      passwordsGroup: fb.group({
         password: [''],
        confirmpass: ['']
        }),
      password: new FormControl(),
      confirmpass: new FormControl()
    });
  }
  onSubmit() {
    const isValid: boolean = this.formModel.get('username').valid; /*校验的结果布尔值*/
    console.log('username的校验结果是：' + isValid);
    const errors: any = this.formModel.get('username').errors; /*校验结果错误信息*/
    console.log('username的错误信息是' + JSON.stringify(errors));
    console.log(this.formModel.value);
  }
  ngOnInit() {
  }

}

二、自定义一个校验方法的步骤(手机号校验)

mobileValidator(control: FormControl): any {
    const mobieReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    const valid = mobieReg.test(control.value);
    console.log('mobile的校验结果是：' + valid);
    return valid ? null : {mobild : true}; /*返回空代表通过，valid为false的时候，返回对象，key,随便给一个值*/
  }

 constructor(fb: FormBuilder) {
    this.formModel = fb.group({
     /* username: new FormControl(),*/
     username: ['', [Validators.required,  Validators.minLength(6)]], /*必填，最长6*/

      mobile: ['', this.mobileValidator],

      passwordsGroup: fb.group({
         password: [''],
        confirmpass: ['']
        }),
      password: new FormControl(),
      confirmpass: new FormControl()
    });
  }

为了满足同时校验几个字段(密码校验)

equalValidator(group: FormGroup): any {
    const password: FormControl = group.get('password') as FormControl;
    const confirmpass: FormControl = group.get('confirmpass') as FormControl;
    const valid: boolean = (confirmpass.value === password.value);
    console.log('密码校验结果' + valid);
    return valid ? null : {equal: true};
  }

 constructor(fb: FormBuilder) {
    this.formModel = fb.group({
     /* username: new FormControl(),*/
     username: ['', [Validators.required,  Validators.minLength(6)]], /*必填，最长6*/
      mobile: ['', this.mobileValidator],


      passwordsGroup: fb.group({
         password: [''],
        confirmpass: ['']
        }, {validator: this.equalValidator}),/*group的校验这样写*/

    });
  }