angular Form 自定义验证

angular  Form 自定义验证

.ts文件

ngOnInit() {
    this.form= this.fb.group({      
      tableName: [null, Validators.compose([
        Validators.maxLength(50), this.checkDataValidator
      ])],      
    });
  }
//自定义验证方法
checkDataValidator = (control: FormControl): { [s: string]: boolean } => {
    if (!control.value) {
      return { required: true };
    } else {
      //^[0-9]+$
      var patter1 = new RegExp('^[0-9]+$', 'g');//纯数字
      var patter2 = new RegExp('[\u4e00-\u9fa5]', 'g');//含汉字

      var rep = patter1.exec(control.value);
      var rep2 = patter2.exec(control.value);

      // var red=
      if (rep || rep2)
        return { repeat: true, error: true };
    }
  }　　

.html

 <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="tableName">数据表名
            </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="errorTableNameTpl" nzHasFeedback>
                <input nz-input formControlName="tableName" id="tableName" placeholder="请输入" />
                <ng-template #errorTableNameTpl let-control>
                    <ng-container *ngIf="control.hasError('maxLength')">
                        不能超过50个字符
                    </ng-container>
                    <ng-container *ngIf="control.hasError('repeat')">//自定义验证
                        不能是纯数字且含汉字
                    </ng-container>
                </ng-template>
            </nz-form-control>
        </nz-form-item>

　　

　

 

3