假设有一个输入类型编号，并且该类型编号中的数字为：
10.0
100.00
100
1
(数字可以有没有限制的整数部分和至少 2 位数字的小数部分(。因此，如果我将此值放在输入类型编号7..字段中，它会显示我的"错误模式"。
这是我的网页：
<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...."。它向我显示"必需"错误，而不是"模式"错误。有人可以帮助我吗？
这里的required是一个有效的错误，因为input[type="number"]返回一个类型为number的值，只要您的输入不是有效数字，它就会返回null。
这意味着，如果您在此处有required验证，它将被触发(这再次有效，因为输入中没有有效数字(。
另外，使用pattern来对付number有点奇怪。
相反，您可以做的是
- 实现所需任何逻辑的自定义验证程序。为了实现这些(甚至找到准备好的(，请检查例如这个回购
- 使用没有此缺点的标准
input[type="text"]，可以用模式进行检查。
问题
您的实现看起来不错，但是与您的输入类型number相关的小问题。您正在尝试分配7..它基本上是一个字符串值，并且您正在尝试分配numberinput。这是不可能的。Angular 和 HTML5 都不允许你这样做。
修复
修复非常简单。只需转换input类型控件，但text类型控件。
<input type="text" class="form-control" [(ngModel)]="home"
name="home" required min="0" step="1" pattern="^[0-9]+(?:[,.]0{1,2})?$" >
如果你想验证最小值和最大值，那么你在 Angular 中有这些验证。
如果你走得更远，那么要么你需要写pipe，要么directive来处理这种情况。