如何区分多个Validators.pattern

Question

我有一个输入框，用户需要输入经度。我希望能够在用户键入 NaN 或 Not-Precise-Enough 值时显示不同的错误消息。我正在使用 FormControl.hasError('ValidatorsName') 来获取验证错误，但似乎我无法区分这些模式。

模板：

<mat-form-field class="form-field">
    <input matInput placeholder="Logitude" [formControl]="longitude">
    <mat-error *ngIf="longitude.hasError('pattern')">
        Longitude must be <strong>a number</strong>
    </mat-error>
    <!-- I want to be able to check patter2 for example -->
    <mat-error *ngIf="longitude.hasError('pattern')"> 
        Longitude must have <strong>a minimum of 5 decimal numbers</strong>
    </mat-error>
</mat-form-field>

还有我的 Angular 代码：

this.longitude = new FormControl(this.attraction.longitude, [
    // is valid number
    Validators.pattern(new RegExp('(\d{1,3})([.|,]{,1})(\d+))','gi')),
    // is precise enough
    Validators.pattern(new RegExp('(\-{0,1})(\d{1,3})([.|,]{1})(\d{5,13})','i'))
]);

有没有办法给这些模式一个标识符？我将不胜感激任何帮助。

Answer 1

遗憾的是，无法为验证器提供自定义标识符。

2018 年 2 月 17 日更新 21:00

正如 Dawid Zbinski 在评论中提到的相同错误的多个错误（例如：'pattern'）被覆盖，我更新了我的答案。

创建自定义验证器，将正则表达式和预定义错误作为参数传递：

  regexValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
      if (!control.value) {
        return null;
      }
      const valid = regex.test(control.value);
      return valid ? null : error;
    };
  }

并像这样使用它：

  this.longitude = new FormControl('', [
    this.regexValidator(new RegExp('^[0-9]+$'), {'number': ''}),
    this.regexValidator(new RegExp('^.{5,}$'), {'precision': ''})
  ]);

  <mat-form-field class="form-field">
    <input matInput placeholder="Logitude" [formControl]="longitude">
    <mat-error *ngIf="longitude.hasError('number')">
        Longitude must be <strong>a number</strong>
    </mat-error>
    <!-- I want to be able to check patter2 for example -->
    <mat-error *ngIf="longitude.hasError('precision')">
        Longitude must have <strong>a minimum of 5 decimal numbers</strong>
    </mat-error>
</mat-form-field>

我还更新了 stackblitz 演示： https://stackblitz.com/edit/angular-dvwcj3?file=app%2Fhello.component.ts

旧答案：

但是 PatternValidators return 是独一无二的 ValidatonErrorObjects。

当您从 official angular repo 处的模式验证器查看源代码时，您可以看到它们总是 return 错误对象中的正则表达式。

return (control: AbstractControl): ValidationErrors | null => {
  if (isEmptyInputValue(control.value)) {
    return null;  // don't validate empty values to allow optional controls
  }
  const value: string = control.value;
  return regex.test(value) ? null :
                             {'pattern': {'requiredPattern': regexStr, 'actualValue': value}};
};

考虑到这一点，您可以轻松地在 component.ts 文件中创建两个 getter 方法。它们在两个正则表达式之间有所不同。在这个例子中，他们只是检查一个唯一的子字符串是否与正则表达式匹配。当然还有其他方法可以解决这个问题。

  get numberError() {
    if (this.longitude && this.longitude.hasError('pattern')) {
      return this.longitude.getError('pattern').requiredPattern.indexOf('(\d+)') !== -1
    }
    return false;
  }

  get preciseError() {
    if (this.longitude && this.longitude.hasError('pattern')) {
      return this.longitude.getError('pattern').requiredPattern.indexOf('(\-{0,1})') !== -1
    }
    return false;
  }

Answer 2

在我将错误对象的值从 '' 更改为 true

之前，

对我不起作用

this.longitude = new FormControl('', [
    this.regexValidator(new RegExp('^[0-9]+$'), {'number': true}),
    this.regexValidator(new RegExp('^.{5,}$'), {'precision': true})
  ]);

如何区分多个Validators.pattern

How to differentiate multiple Validators.pattern

validation

angular-validation

angular

2018 年 2 月 17 日更新 21:00