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

}

模板

<form [formGroup]="formModel" (submit)="onSubmit()">
  <div>用户名:<input type="text" name="username" formControlName="username"/></div>
  <div [hidden]="!formModel.hasError('required','username')">
    <!--hasError两个参数，一是校验的是否必填，校验器失败返回的对象的key的值，有值就是失败的
    。二是检查的字段名字，hidden为true隐藏，所以取反。-->
    用户名是必填项
  </div>
  <div>电话：<input type="text" name="mobile" formControlName="mobile"/></div>
  <div [hidden]="!formModel.hasError('mobile','mobile')">请输入正确的手机号</div>
  <div formGroupName="passwordsGroup">
     <div>密码：<input type="text" name="password" formControlName="password"/></div>
    <div [hidden]="!formModel.hasError('minlength',['passwordsGroup','password'])">密码最小长度是6</div>
     <div>确认密码:<input type="text" name="confirmpass" formControlName="confirmpass"/></div>
    <div [hidden]="!formModel.hasError('equal','passwordsGroup')">{{formModel.getError('equal','passwordsGroup')?.descxx}}</div>
  </div>
  <div><input type="submit" value="提交"/></div>
</form>

异步校验器：可观测的流

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], /*异步手机号的校验*/

模板

<div>{{formModel.status}}</div><!--表单的状态-->