Validators.pattern 的正则表达式仅表示整数

Question

我正在尝试使用正则表达式为整数（例如 60）创建一个验证器。这是我的尝试方式：

meter: ["", Validators.required, Validators.pattern(/[0-9]/)]

它不起作用，但我不得不说我不熟悉这种技术。任何人都可以阐明我如何修改此表达式以仅接受整数？这个数字代表身高，身高分为米和厘米。

我已经搜索过了，但是我可以找到小数等等，不知何故，也许是因为它太琐碎了，对于整数，我找不到，事实上，我昨天在这里找到了，但我找不到答案anymore I have found, 我正在寻找另一件事。

Answer 1

首先，您不需要自定义验证器来执行此操作，因为正则表达式验证已经是内置验证器。

其次，将验证器应用于表单控件的方式取决于您使用的是 template-driven forms or reactive forms。

如果您使用的是模板驱动的表单（通常用于 Angular 初学者），只需将您的输入控件模板设置为如下所示：

<input type="number" name="meter" required pattern="[0-9]" [(ngModel)]="meter">

如果您使用的是响应式表单，只需将 "required" 和 "pattern" 验证器分配给您的表单控件。

<input type="number" [formControl]="myControl">

myControl = new FormControl(null, [
    Validators.required,
    Validators.pattern("[0-9]+")
  ]);

在响应式表单控件中使用时，您可以传入字符串或正则表达式对象，它们之间存在差异，如官方文档所述：

If a string is passed, the ^ character is prepended and the $ character is appended to the provided string (if not already present), and the resulting regular expression is used to test the values.

最后，附上一个 Stackblitz 示例，以显示此验证器在两种 template/reactive 形式中的简单用法。

https://stackblitz.com/edit/angular-ivy-neux3n

Validators.pattern 的正则表达式仅表示整数

Regex expression with Validators.pattern for just integer number

regex

angular

formbuilder

angular-custom-validators