6.表单校验下

新建一个ts，把校验方法放进去，然后导出。移出的方法不是ts 的类的方法，而是全局的ts的函数，需要用function来声明，用export来暴露出去。然后在模板组件里直接引用它。

Validators.ts(密码验证，手机号验证)

/*方法*/
import {FormControl, FormGroup} from '@angular/forms';

export  function 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 : {mobile : true}; /*返回空代表通过，valid为false的时候，返回对象，key,随便给一个值*/
}
export  function 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: {descxx: '密码和确认密码不匹配'}};
}

reactive-regist.ts

export class ReactiveRegistComponent implements OnInit {
  formModel: FormGroup;

  constructor(fb: FormBuilder) {
    this.formModel = fb.group({
     /* username: new FormControl(),*/
     username: ['', [Validators.required,  Validators.minLength(6)]], /*必填，最长6*/
      mobile: ['', mobileValidator],
      passwordsGroup: fb.group({
         password: ['' , Validators.minLength(6)],
        confirmpass: ['']
        }, {validator: equalValidator}), /*group的校验这样写*/
    });
  }
  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));*/
  if (this.formModel.valid) {/*所有字段合法为true，打印信息*/
    console.log(this.formModel.value);
  }
 }
  ngOnInit() {
  }

}

模板

  
用户名:
  

    
    用户名是必填项
  
  
电话：
  
请输入正确的手机号
  

     
密码：
    
密码最小长度是6
     
确认密码:
    
{{formModel.getError('equal','passwordsGroup')?.descxx}}
  
  

异步校验器：可观测的流

Validators.ts

export  function mobileAsyncValidator(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 Observable.of(valid ? null : {mobile : true}).delay(5000); /*在返回的时候，返回的是一个流，延迟五秒，模拟服务器，五秒以后返回*/
} /*异步校验器可作为fromcontrol的第三个构造函数*/

表单.ts

  mobile: ['', mobileValidator, mobileAsyncValidator], /*异步手机号的校验*/

模板

{{formModel.status}}