时间戳

首页 > 解决方案 > Angular2 - 为什么我的带有 html 模式属性的反应式表单输入无法正确验证？

regex - Angular2 - 为什么我的带有 html 模式属性的反应式表单输入无法正确验证？

问题描述

我正在努力解决一个我无法理解的问题：

我需要使用 来验证具有角度反应形式上的pattern="[0-9]+([,.][0-9])?"属性的输入字段，但似乎我最后的量词不起作用......Validators.pattern?

我想要的是

我想验证最大值为零或一位小数的数字。正如您在https://regex101.com/r/2D2sww/1上看到的，正则表达式运行良好。

实际问题

在我的应用程序中，我可以输入任意数量的小数，而无需Validator.pattern执行任何操作。任何其他字符都会使表单无效，因此我的验证器正在工作。

这是我的代码（简化）：

组件.html

<form [formGroup]="myForm">
<input type="number" formControlName="myInputField" id="myInputField" pattern="[0-9]+([,.][0-9])?" required />
</form>

component.ts（为清楚起见，跳过了每个导入和声明）

ngOnInit() {
  this.myForm = this.formBuilder.group({
      myInputField: [
          "",
          [Validators.required, Validators.pattern],
      ]
  });
}

我已经尝试过使用Validators.pattern(/^[0-9]+([,.][0-9])?$/)，并且如文档中Validators.pattern("[0-9]+([,.][0-9])?")所指出的那样，但它并没有改变任何东西，所以我怀疑我的正则表达式不正确......

有任何想法吗 ？谢谢，祝你有美好的一天:)

标签： regexangularvalidationangular-reactive-forms

解决方案

我认为您的验证器模式正则表达式没有任何问题，您可以pattern从输入中删除 ' 属性，这是多余的，因为您是从 ts 文件内部启动它：'myInputField': new FormControl(null, [Validators.pattern('^[0-9]+([,.][0-9])?$')]).

StackBlitz

推荐阅读