(十七)、Angular4.0 响应式表单校验

野性酷女 2022-05-27 00:12 190阅读 0赞

**一、在app下新建validator目录，创建一个ValidatorScript的ts类型文件，用来编写检验方法**

import {FormControl, FormGroup} from '@angular/forms';
    import {Observable} from 'rxjs/Observable';
    import 'rxjs/add/observable/of';
    import 'rxjs/add/operator/delay';
    
    // 手机号码校验
    export function mobileVlidator(control: FormControl): any {
      const  myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    
      const valid = myreg.test(control.value);
      console.log('mobile的校验结果' + valid);
    
      return valid ? null : {mobile: true};
    }
    
    // 手机号码异步校验
    export function mobileAsyncVlidator(control: FormControl): any {
      const  myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    
      const valid = myreg.test(control.value);
      console.log('mobile的校验结果' + valid);
    
      return Observable.of(valid ? null : {mobile: true}).delay(5000);
    }
    
    // 确认密码验证
    export function equalsValidator(group: FormGroup): any {
      const password: FormControl = group.get('password') as FormControl;
      const pConfirm: FormControl = group.get('pConfirm') as FormControl;
      const valid: boolean = (password.value === pConfirm.value);
      console.log('密码校验结果' + valid);
      return valid ? null : {equals: true};
    }

**二、修改reactive-regist.component.ts，添加校验**

import { Component, OnInit } from '@angular/core';
    import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
    import {equalsValidator, mobileAsyncVlidator, mobileVlidator} from '../validator/ValidatorScript';
    
    @Component({
      selector: 'app-reactive-regist',
      templateUrl: './reactive-regist.component.html',
      styleUrls: ['./reactive-regist.component.css']
    })
    export class ReactiveRegistComponent implements OnInit {
    
      formModel: FormGroup;
    
      // 定义响应式表单的数据结构
      constructor(fb: FormBuilder) {
        this.formModel = fb.group({
          username: ['', [Validators.required, Validators.minLength(6)]],
          mobile  : ['', mobileVlidator, mobileAsyncVlidator],
          passwordsGroup: fb.group({
            password: ['', [Validators.minLength(6)]],
            pConfirm: ['']
          }, {validator: equalsValidator})
       });
      }
    
      // 响应式表单校验
      validateForm(control: AbstractControl): {[key: string]: any} {
        return null;
      }
    
      onSubmit() {
        // const isVaild = this.formModel.get('username').valid;
        // console.log('username校验结果为: ' + isVaild);
        if (this.formModel.valid) {
          console.log(this.formModel.value);
        }
      }
    
      ngOnInit() {
      }
    
    }

**三、reactive-regist.component.html**

<form [formGroup]="formModel" (submit)="onSubmit()">
      <div>用户名：<input type="text" formControlName="username"></div>
      <div [hidden]="!formModel.hasError('required','username')">
        用户名不能为空
      </div>
      <div [hidden]="!formModel.hasError('minlength','username')">
        用户名最小长度是6
      </div>
      <div>手机号：<input type="text" formControlName="mobile"></div>
      <div [hidden]="!formModel.hasError('mobile','mobile')">
        请输入正确的手机号
      </div>
      <div formGroupName="passwordsGroup">
        <div>密码：<input type="password" formControlName="password"></div>
        <div [hidden]="!formModel.hasError('minlength',['passwordsGroup','password'])">
          密码最小长度是6
        </div>
        <div>确认密码：<input type="password" formControlName="pConfirm"></div>
        <div [hidden]="!formModel.hasError('equals','passwordsGroup')">
          密码不匹配
        </div>
      </div>
      <button type="submit">提交</button>
      <br>
      {
       {formModel.status}}
    </form>

**四、访问localhost:4200测试**

**五、状态字段**

*  touched和untouched 是否获取焦点 示例：(把用户名的两个校验用一个div包含起来，鼠标失去焦点后显示)

<div [hidden]="formModel.get('username').valid || formModel.get('username').untouched">
        <div [hidden]="!formModel.hasError('required','username')">
          用户名不能为空
        </div>
        <div [hidden]="!formModel.hasError('minlength','username')">
          用户名最小长度是6
        </div>
      </div>

*  pristine和dirty (如果字段的值改变过，则pristine为false，dirty为true) (把手机号的校验用一个div包含起来，鼠标失去焦点后不显示，只有在输入字符后才有校验提示)

<div [hidden]="formModel.get('mobile').valid || formModel.get('mobile').pristine">
        <div [hidden]="!formModel.hasError('mobile','mobile')">
          请输入正确的手机号
        </div>
      </div>

*  pending，当一个字段处于异步校验时，属性为true，这个时候可以显示一段文字或图片，来告诉用户正在校验（在手机号码验证下面添加一个div，用于peding示例）

<div [hidden]="!formModel.get('mobile').pending">
        校验手机号码中...
      </div>

六、

七、

八、

九、

十、

十一、

十二、