7.2响应式表单校验

angular预定义好的检验器

angular预定义好的检验器位于forms模块中的Validators中，常见校验器如下：

• minLength：最小长度

• maxLength：最大长度

• required：必填

• pattern：需要匹配的正则表达式

自定义校验器

自定义一个方法，该方法必须具有一个AbstractControl类型的参数，却必须要有一个返回值，返回值为任意结构的对象，但对象的key必须为string类型，值可为任意类型。

xxxxx(control：AbstractControl)：{[key:string]:any}{

}

实战一：自定义FormControl检验器

模板代码

<div>电话：<input formControlName="telphone" type="number"></div>

控制器代码 自定义一个电话号码校验器mobileValidator

  mobileValidator(control: FormControl): any {
    let myreg = /^1(3|4|5|7|8)\d{9}$/;
    let valid = myreg.test(control.value);
    console.log('mobile的校验结果是：' + valid);
    return valid ? null : {mobile: true};
  }
}

使用自定义电话号码校验器

telphone: ['',  this.mobileValidator]

实战二：自定义FormGroup检验器

模板代码

  <div formGroupName="passwords">
    <div>密码：<input formControlName="password" type="password"></div>
    <div>确认密码：<input formControlName="password1" type="password"></div>
  </div>

控制器代码 自定义密码检验器，要求密码和确认密码两个字段相同。

 passwordValidator(formGroup: FormGroup): any {
    let password: FormControl = formGroup.get('password') as FormControl;
    let password1: FormControl = formGroup.get('password1') as FormControl;
    let valid: boolean = (password.value === password1.value);
    console.log('密码校验结果是：' + valid);
    return valid ? null : {passwordEqual: true};
  }

使用自定义密码校验器 {validator: this.passwordValidator}

      passwords: this.fb.group({
        password: [''],
        password1: ['']
      }, {validator: this.passwordValidator})

实战三：提取检验规则到单独文件

新建validator文件夹，新建validators.ts文件。 在validators.ts文件中按以下格式编写校验规则：export fuction 自定义校验方法

export function 检验方法名（）{

}

export function mobileValidator(control: FormControl): any {
  let myreg = /^1(3|4|5|7|8)\d{9}$/;
  let valid: boolean = myreg.test(control.value);
  console.log('mobile的校验结果是：' + valid);
  return valid ? null : {mobile: true};
}

使用校验器

• 使用一个FormControl检验器

  userName: ['', Validators.required]
  userName: ['', 检验器]

• 使用多个FormControl检验器

  userName: ['', [Validators.required, Validators.maxLength(36)]]
  userName: ['', [检验器一, 检验器二,...]]

• 使用FormGroup检验器 {validator: this.passwordValidator}

      passwords: this.fb.group({
        password: [''],
        password1: ['']
      }, {validator: this.passwordValidator})

获取校验结果

• 获取表单元素合法性 this.formModel.get('userName').valid

    let isValid: boolean = this.formModel.get('userName').valid;
    console.log('userName的校验结果：' + isValid);

• 获取表单元素错误信息 this.formModel.get('userName').errors

    let errors: any = this.formModel.get('userName').errors;
    console.log('userName的错误信息是：' + JSON.stringify(errors));

• 获取表单合法合法性： this.formModel.valid

    let formValid: boolean = this.formModel.valid;
    console.log('表单的校验结果：' + formValid);

显示错误信息

<div [hiden]="!formModell.hasError('required','formCOntrolName的值')">...</div>
<div [hiden]="!formModell.hasError('放回值key的值')">...</div>
<div [hiden]="!formModell.hasError('required',['passwordsGroup','password'])">...</div>
<div [hiden]="!formModell.hasError('required',['一级容器','二级容器'])">...</div>
['passwordsGroup','password']
key的值。只要有值代表校验失败

检验器提供错误信息 返回值{equal:{descxxx：“错误信息”}}

异步校验器 返回值为一个流

return Observable.of(valid ? null:{moblie:true}).delay(5000);

获取表单状态 pedding状态等待验证

状态字段

• touched和untouched 用户是否访问过这个字段，是否获取过焦点 获取过焦点时： touched=ture untouched=false [hidden]=formModel.get('userName').valid || formModel.get('user').untouched

• pristine和dirty 字段值是否改变过 未改变过 ptistine=ture；dirty=false [hidden]=formModel.get('userName').valid || formModel.get('user').dirty

• pending 用于异步检验，正在校验时pending=ture [hidden]=formModel.get('userName').valid || formModel.get('user').pending

angular会自动根据字段的状态为字段添加一些样式 自定义样式 ng-pending ng-touched ng-invalid

.ng-invalid{
    border:red;
}
.has-error{

}

检验响应式表单

检验模板式表单 将检验方法包装成一个指令 自定义指令 ng g directive directives/mobileValidatorDirector

providers：[{provide:NG_VALIDATORS,useValue:mobileValidator,multi:true}]

一个token下可以挂多个值

required minlength="6" 使用novalidate禁止浏览器默认的表单校验

获取表单有效状态 myForm.valid

获取表单校验结果 myForm.form.hasError

获取字段状态