6角图不匹配

Question

假设有一个输入类型编号，并且可以在这个类型编号中的麻木是：

10.0
100.00
100
1

(该数字可以有无限制的整数部分和具有至少2位数的十进制部分)。因此，如果我将这个值放入输入类型7..字段中，它将显示我的“错误模式”。

这是我的html：

<input type="number" class="form-control" [(ngModel)]="home" name="home" required min="0" step="1" pattern="^[0-9]+(?:[,.]0{1,2})?$" >

在我使用TD表单时，我在ts中检查哪种错误是：

form.controls.home.errors.pattern或

form.controls.home.errors.pattern

问题是当我输入"7....“时。它显示了一个“必需”错误，而不是“模式”错误。有人能帮我吗？

Answer 1

required在这里是一个有效的错误，因为input[type="number"]返回一个带有number类型的值，并且只要输入不是一个有效的数字，它就返回null。

这意味着，如果这里有一个required验证，它将被触发(这再次有效，因为输入中没有有效的数字)。

另外，使用pattern来对付number也有点奇怪。

相反，你可以做的是

• 实现任何您想要的逻辑的自定义验证器。为了实现这些(甚至是找到现成的)，请检查例如这个回购
• 使用标准的input[type="text"]，它没有这个缺点，可以用模式进行检查。

Answer 2

问题

您的实现看起来很好，但是与输入类型number有关的问题很小。您正在尝试赋值7..，它基本上是一个字符串值，并且试图分配number input。这是不可能的无论是角还是HTML5，都不会允许你这样做。

修复

修复很简单。只需将input类型控件转换为text类型控件即可。

    <input type="text" class="form-control" [(ngModel)]="home" 
name="home" required min="0" step="1" pattern="^[0-9]+(?:[,.]0{1,2})?$" >

如果你想要验证最小和最大，那么你有这些验证的角度。

如果您更进一步，那么您需要编写pipe或directive来处理这种情况。