根据 Angular 中的验证模式的错误消息

Question

我想根据验证模式划分错误消息，例如，在下面，有 2 种模式

Validators.pattern(/[^ +]/), Validators.pattern(/^[ +|a-zA-Z0-9]+$/),

但只能设置一条消息。

<md-error *ngIf="locaCd.errors?.pattern"> onny blank is unacceptable AND must be filled by a~z,A~Z or number. </md-error>

无论如何要划分每个witout制作CustomValidation？

原文由 TikChiku 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

默认情况下 Validators.pattern() 接受参数为 pattern: string | RegExp 所以我会更好地建议你创建自定义验证，它处理单个方法可以为你动态处理。

例如 demo.component.ts

 import { FormGroup, FormControl, Validators, ValidatorFn } from '@angular/forms';

this.form = new FormGroup({
   email: new FormControl('', [
    this.customPatternValid({ pattern: /[A-Z]/, msg: 'Small characters not allowed' }),
    this.customPatternValid({ pattern: /^([^0-9]*)$/, msg: 'Numbers is not allowed' })
   ]),
   password: new FormControl('', [
    Validators.required
   ])
});

// Create our customPatternValid function

public customPatternValid(config: any): ValidatorFn {
    return (control: FormControl) => {
      let urlRegEx: RegExp = config.pattern;
      if (control.value && !control.value.match(urlRegEx)) {
        return {
          invalidMsg: config.msg
        };
      } else {
        return null;
      }
    };
}

例如 demo.component.html

 <form [formGroup]="form">
  <input type="email" placeholder="Email" formControlName="email"/>

  <div *ngIf="!form.controls.email.valid && (form.controls.email.dirty ||form.controls.email.touched)" class="error">
    <div *ngIf="form.controls.email.errors.invalidMsg">
      {{form.controls.email.errors.invalidMsg}}
    </div>
  </div>
</form>

原文由 mayur 发布，翻译遵循 CC BY-SA 3.0 许可协议