一、
1. html:

 <input nz-input id="name" formControlName="name" required>
<div *ngIf="addForm.get('name').invalid && (addForm.get('name').dirty || addForm.get('name').touched)" class="alert alert-danger">
        <div *ngIf="addForm.get('name').errors.required">姓名不能为空</div>
        <div *ngIf="addForm.get('name').errors.minlength">姓名不得少于六位</div>
</div>
2. component:
this.addForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(6) 
});
  1. 同步验证器函数: requiredminlength;(验证器函数分为同步验证器函数和异步验证器函数两种,还可以写自己的验证器)
  2. 改变控件的值会改变控件的 dirty状态;控件失去焦点时,会改变控件的 touched状态;
  3. 检查dirty和touched的目的:在碰过文本框后才做出错误提示(如果不检查的话,一进入这个表单界面就会提示“姓名不能为空”);

二、 自定义验证器

  1. html:
<input nz-input id="name" formControlName="name" required>
<div *ngIf="addForm.get('name').invalid && (addForm.get('name').dirty || addForm.get('name').touched)" class="alert alert-danger">
     <div *ngIf="addForm.get('name').errors.forbiddenName">姓名不能为 bob0</div>
</div>
  1. component:
this.addForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(6), forbiddenNameValidator(/bob/i)]]  
});
  1. directive:
import { ValidatorFn, AbstractControl } from '@angular/forms';
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
      const forbidden = nameRe.test(control.value);
      return forbidden ? {'forbiddenName': {value: control.value}} : null;
    };
} 
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐