Angular 响应式表单校验

一.angular校验器

1.使用内建的验证规则

Angular 提供了一些内建的 validators，在表单中使用它们。

目前 Angular 支持的内建 validators 如下：

• required - 设置表单控件值是非空的。

• email - 设置表单控件值的格式是 email。

• minlength - 设置表单控件值的最小长度。

• maxlength - 设置表单控件值的最大长度。

• pattern - 设置表单控件的值需匹配 pattern 对应的模式。

  this.formModel=this.fb.group({
      nickname:['',[Validators.required,Validators.minLength(6)]],  //使用内置校验器
  });

 //[1]根据模型对象的valid属性判断当前对象是否合法
    let nicknameValid=this.formModel.get("nickname").valid;
    console.log("nickname是否校验通过"+nicknameValid);
   
 //[2]通过模型对象的errors属性获得校验错误信息
    let nicknameErrors=this.formModel.get("nickname").errors;
    console.log("nickname的校验信息"+JSON.stringify(nicknameErrors));

2.自定义验证器

 //自定义校验器
  XXX(param:AbstractControl):{[key:string]:any}{
    //AbstractControl是FormControl,FormGroup,FormArray的父类，也就是说方法的参数是三个里面的任意一个类型的对象
    return null;
  }

##1单字段校验 -自定义手机号校验器：

mobileValidator(mobile:FormControl):any{
    let value=(mobile.value||'')+'';
    let regx=/^1[3|4|5|8][0-9]\d{4,8}$/;
    if(!regx.test(value)){
      console.log({'mobile校验器是否通过':true});
      return {'mobile':true};
    }else{
      console.log({'mobile校验器是否通过':false});
      return null;
    }
  }

在模型对象中使用上述的手机号校验器：

 this.formModel=this.fb.group({
      nickname:['',[Validators.required,Validators.minLength(6)]],
      mobile:['',this.mobileValidator], //使用自定义的校验器
  });

##2 校验多个字段，比如password,confirmPassword

校验器声明：

  passwordValidator(info:FormGroup){
     let password:FormControl=info.get('password') as FormControl;
     let confirmPassword:FormControl=info.get('confirmPassword') as FormControl;
     if(password.value!==confirmPassword.value){
         return {"password":true};
     }else{
       return null;
     }
  }

校验器使用：

  this.formModel=this.fb.group({
      nickname:['',[Validators.required,Validators.minLength(6)]],
      mobile:['',this.mobileValidator],
      passwordInfo:this.fb.group({
        password:[''],
        confirmPassword:[''],
      },this.passwordValidator),
     
  });

##3将自定义校验器独立出去，新建validators/validators.ts,内容如下

import { FormGroup, FormControl } from "@angular/forms";

 export function passwordValidator(info:FormGroup){
    let password:FormControl=info.get('password') as FormControl;
    let confirmPassword:FormControl=info.get('confirmPassword') as FormControl;
    if(password.value!==confirmPassword.value){
        return {"password":true};
    }else{
      return null;
    }
 }

 export function mobileValidator(mobile:FormControl):any{
    let value=(mobile.value||'')+'';
    let regx=/^1[3|4|5|8][0-9]\d{4,8}$/;
    if(!regx.test(value)){
      
      return {'mobile':true};
    }else{
      return null;
    }
  }

如何在组件中使用公共校验器：

import {mobileValidator,passwordValidator} from '../validators/validators';  
this.formModel=this.fb.group({
      nickname:['',[Validators.required,Validators.minLength(6)]],
      mobile:['',mobileValidator],
      passwordInfo:this.fb.group({
        password:[''],
        confirmPassword:[''],
      },{validator:passwordValidator}),
      emails:this.fb.array([
        [''],
      ]),
  });

##4 判断整个表单数据是否合法

//通过formModel的valid属性来判断表单中所有字段是否合法
    if(this.formModel.valid){
      console.log(this.formModel.value);
    }

3.模板错误信息显示处理

<form [formGroup]="formModel" (submit)="createUser()" >

<!-- 1校验昵称模板处理 -->
<div>昵称：<input type="text" formControlName="nickname"/> </div>
<div [hidden]="!formModel.hasError('required','nickname')" >昵称是必填项</div>
<div [hidden]="!formModel.hasError('minlength','nickname')" >昵称的最小长度是6</div>
<!--formModel.hasError('错误信息的key','要检查的字段名称')  -->

<!-- 2校验手机号模板处理 -->
<div>手机：<input type="text" formControlName="mobile"/> </div>
<div [hidden]="!formModel.hasError('mobile','mobile')" >手机号不合法</div>

<!-- 3校验密码与确认密码 -->
<div formGroupName="passwordInfo">
    <div>密码<input type="text" formControlName="password"/> </div>
    <div>确认密码<input type="text" formControlName="confirmPassword"/> </div>
</div>
<!-- 单独校验密码 -->
<div [hidden]="!formModel.hasError('required','passwordInfo.password')" >密码是必填项</div>
<div [hidden]="!formModel.hasError('password','passwordInfo')" >密码不匹配</div>


<input type="submit" value="提交" />
</form>

##2 具体错误信息由校验器来决定

校验器：

export function passwordValidator(info:FormGroup):any{
    let password:FormControl=info.get('password') as FormControl;
    let confirmPassword:FormControl=info.get('confirmPassword') as FormControl;
    if(password.value===confirmPassword.value){
        return null;
    }else{
     
      return {"password":{description:"密码与确认密码不一致"}};
    }
 }

使用：

<!-- 校验密码与确认密码 -->
<div formGroupName="passwordInfo">
    <div>密码<input type="text" formControlName="password"/> </div>
    <div>确认密码<input type="text" formControlName="confirmPassword"/> </div>
</div>
<!-- 单独校验密码 -->
<div [hidden]="!formModel.hasError('required','passwordInfo.password')" >密码是必填项</div>
<!-- 获取错误信息 -->
{{formModel.getError('password','passwordInfo')?.description}}

4.异步校验器，返回可观测的流，同步校验满足之后才回调异步校验

校验器：

  export function mobileasyncValidator(mobile:FormControl):any{
    let value=(mobile.value||'')+'';
    let regx=/^1[3|4|5|8][0-9]\d{4,8}$/;
    if(!regx.test(value)){
      //延迟5s返回数据，模拟调用远程服务的行为
      return Observable.of({'mobile':true}).delay(50000);
    }else{
      return  Observable.of(null).delay(5000);
    }
  }

数据模型中校验器的使用：

  this.formModel=this.fb.group({
      mobile:['',mobileValidator,mobileasyncValidator],  //['默认值',同步校验器,异步校验器]
  });

<!-- 执行异步校验时表单的状态是Pending -->
<div>{{formModel.status}}</div>