如何创建只接受数字的 Validator.pattern

Question

我正在做一个 angular 项目，我试图确保输入字段只接受 1 到 28 之间的正整数，但是我尝试过的正则表达式没有将表单字段标记为无效输入字母时。

这是我的代码：

setDateRegex = /^[0-9]*$/;

. . . 

scheduleSetDaysBefore: [null, [Validators.max(28), Validators.min(1), Validators.pattern(this.setDateRegex)]],

我也尝试了以下正则表达式，其中 none 个有效。

/^[0-9]+$/

/^[0-9]+(\.?[0-9]+)?$/

还有一些我不记得了。

编辑

我只是想补充一点，我已经通过使用 Valdidator.pattern() 检查是否以可接受的格式输入电子邮件以及各种长度验证器实现了类似的效果。

Answer 1

您也许可以使用 custom validator，像这样

// i have multiple custom validators so I am using them in a separate file.
export class CustomValidators {

  static isNumbers(control: AbstractControl) {

    if (!(control.value)) {
      return null;
    }

    return String(control.value)
      .match(/^[0-9.]+$/) ? null : {'isNumbers': true};
  }
}

在您的 formBuilder 中，包括这个

scheduleSetDaysBefore: [null, [Validators.max(28), Validators.min(1), CustomValidators.isNumbers]],

并且在您的 HTML 中，您可以检查此错误，在控件上应用无效 class 或显示消息

<span class="error-message" *ngIf="form.get('scheduleSetDaysBefore').getError('isNumbers')">Please enter numbers only.</span>

如何创建只接受数字的 Validator.pattern

How to create a Validator.pattern that accepts ONLY numbers

regex

validation

customvalidator

typescript

angular