Angular 9 - Validators.pattern('^[0-9][0-9][0-9]$') 与 012 等前导 0 数字不匹配答案

【问题标题】：Angular 9 - Validators.pattern('^[0-9][0-9][0-9]$') doesn't match with leading 0 number like 012Angular 9 - Validators.pattern('^[0-9][0-9][0-9]$') 与 012 等前导 0 数字不匹配
【发布时间】：2020-04-22 17:51:54
【问题描述】：

为了验证可以包含前导 0 的简单 PIN，我编写了以下非常简单的正则表达式：

^[0-9][0-9][0-9][0-9][0-9][0-9]$

这在我尝试过的不同在线正则表达式工具上按预期工作，但是，它在 Angular 验证器中不起作用，因为前导 0 不算作数字：

  PIN = new FormControl('', [
    Validators.required,
    Validators.minLength(6),
    Validators.maxLength(6),
    Validators.pattern('^([0-9][0-9][0-9][0-9][0-9][0-9])$'),
  ]);

  formPINGroup = this.formBuilder.group({
    PIN: this.PIN,
  });

尽管我浏览了不同的论坛，但我无法弄清楚这一点，人们总是在寻找相反的东西。

如果 Angular 专家看到这篇文章，欢迎他的帮助！

在此期间，保重！

编辑：

如果你想尝试一下，我创建了一个 Stackblitz： https://stackblitz.com/edit/angular-zzsjn1

这里有三个结果：

第一个不行，因为前导0
第二个没问题，因为我在末尾添加了数字 6
显然最后一个是错误的。

【问题讨论】：

我无法从您的代码中重现您的问题。你能提供一个stackblitz吗？
你可以像^[0-9]{6}$一样重写它
您的正则表达式仅匹配 6 位数字。
@ariel 可能是这样，但这并不能解决问题的根源。
感谢大家的帮助，我已经更新了我的主要问题，如果有帮助的话，我会尝试创建一个 Stackblitz。

标签： regex angular validation

【解决方案1】：

问题在于 HTML5 输入元素。尝试将 hello-component.ts 中的 type="number" 更改为 type="tel"（来自您的链接）。有了它，您在技术上仍然可以输入一些非数字字符，但只有您的 6 位数字（带或不带前导零）的模式将有效。也可以看看 this thread

【讨论】：

谢谢 Zwiers，你让我在这篇文章中走上正轨。我的最终解决方案如下：
type="tel" pattern="[0-9]{6}" maxlength="6"