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

Question

我正在尝试使用正则表达式创建仅适用于整数（例如 60）的验证器。我正在尝试这样做：

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

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

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

Answer 1

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

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

如果您使用模板驱动的表单（通常用于 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 示例，展示了此验证器在模板/反应式表单中的简单用法。