根據 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>

無論如何要分成每個不制作CustomValidation？？

Answer 1

您可以在md-error使用相同的模式表達式，並將它們分成兩個不同的div -elements，一個與另一個匹配

編輯測試myselv后，我發現，你需要使用從打字稿一個regepx（至少這就是我如何使它工作）來執行匹配

在您的組件中，定義您的正則表達式

emptyRegExp = new RegExp(/[^ +]/);
letterNumberRegExp = new RegExp(/^[ +|a-zA-Z0-9]+$/);

然后在html中使用這些表達式來顯示所需的錯誤消息。

<md-error *ngIf="locaCd.errors?.pattern">
   <div *ngIf="emptyRegExp.exec(locaCd?.value)"> Blank is unacceptable.</div>
   <div *ngIf="letterNumberRegExp.exec(locaCd?.value))">Must be filled by a~z,A~Z or number.</div>
</md-error>

Answer 2

默認情況下， Validators.pattern()接受參數作為pattern: string | RegExp 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>

Answer 3

這是ValidatorFn ，它將驗證委托給Validators.pattern但在驗證錯誤時返回一個帶有message鍵的對象。

const patternWithMessage = (pattern: string | RegExp, message: string): ValidatorFn => {
    const delegateFn = Validators.pattern(pattern)
    return control => delegateFn(control) === null ? null : { message }
}

有了這個，模板可以顯示驗證錯誤message值。

例如patternWithMessage(/^[a-zA-Z_][a-zA-Z_0-9]*$/, 'Invalid value for key')