时间戳

首页 > 解决方案 > 带有 Validators.pattern 的正则表达式仅用于整数

regex - 带有 Validators.pattern 的正则表达式仅用于整数

问题描述

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

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

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

我已经搜索过了，但是我可以找到小数，所以，不知何故，也许是因为它太微不足道了，对于整数，我找不到，事实上，我昨天在这里找到了，但我再也找不到我找到的答案了，我在寻找另一件事。

标签： regexangularformbuilderangular-custom-validators

解决方案

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

其次，您将验证器应用于表单控件的方式取决于您使用的是模板驱动的表单还是反应式表单。

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

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

如果您使用的是响应式表单，只需将“必需”和“模式”验证器分配给您的表单控件。

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

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

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

如果传递了字符串，则将 ^ 字符附加到提供的字符串（如果尚未存在）后，并使用生成的正则表达式来测试值。

最后，附上一个 Stackblitz 示例，以显示此验证器在模板/反应式形式中的简单用法。

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

推荐阅读