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

Regex expression with Validators.pattern for just integer number

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

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

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

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

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

其次,将验证器应用于表单控件的方式取决于您使用的是 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