模板式表单验证

HTML

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value, myForm.valid)" novalidate>
  <div>用户名:<input type="text" ngModel required minlength="6" name="username"></div>
  <div [hidden]="!myForm.form.hasError('required','username')">
    用户名是必填项
  </div>
  <div>手机号码:<input type="number" ngModel mobileValidator name="mobile"></div>
  <div ngModelGroup="passwordsGroup" appEqualValidator>
    <div>密码:<input type="password" ngModel minlength="6" name="password"></div>
    <div>确认密码:<input type="password" ngModel name="pconfirm"></div>
    <div [hidden]="myForm.hasError('equal','passwordsGroup')">
      <p >{{myForm.getError('equal','passwordsGroup')?.descxxx}}</p>
    </div>
  </div>
  <button type="submit">注册</button>
</form>

TS

import {FormControl, FormGroup} from '@angular/forms';
// tslint:disable-next-line:import-spacing
import {of} from  'rxjs';

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

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

export function equalValidator(passordsGroup: FormGroup): any{
  // const pass = passordsGroup.get('passwordsGroup').get('password');
  const password: FormControl = passordsGroup.get('password') as FormControl;
  const pconfirm: FormControl = passordsGroup.get('pconfirm') as FormControl;
  const isValid = (password.value === pconfirm.value);
  console.log('密码是否一致:' + isValid);
  return isValid ? null : {equal: {descxxx: '密码不匹配，请重新输入'}};
}