Angular输入[type=number]的验证错误？

Question

在尝试验证 Angular 7 中的 input[type=number] 时，我遇到了一个奇怪的问题，希望有人能帮助解决。

    <input class="form-control" type="number" name="entranceFee" min="0" [(ngModel)]="entranceFee" #entranceFee="ngModel" pattern="\\d+" [ngClass]="{ 'is-invalid': entranceFee.touched && entranceFee.invalid }" >
    <div *ngIf="entranceFee.invalid && entranceFee.touched" class="invalid-feedback">
        <div *ngIf="entranceFee.errors.pattern">Only numbers are permitted</div>
        <div *ngIf="entranceFee.errors.min">Value cannot be smaller than '0'</div>
    </div>

输入框只能接受大于等于0的数字。但是，当我输入数字值（0-9）时，表单变为无效状态。为什么？在ngAfterViewChecked（）中将ngModel输出到控制台时，模型中写入了数字值。那么如何验证此表单？验证器中有错误还是我的问题？

使用响应式表单和/或input[type=text]实现此代码时，结果相同。

- Lars

---

这是一个数字输入，所以使用模式是无用的。该输入仅接受数字。而 min 不是验证指令。它只是一个标准的 HTML 属性，浏览器使用它来防止您旋转到最小值以下。 - JB Nizet

不完全是这样，因为可以输入字母“e”。1e1有意义，但你也可以输入“eeee”等。 - Lars

Answer 1

试一试这个：

<input 
  class="form-control" 
  type="number" 
  name="entranceFee"
  #entranceFee="ngModel"  
  [(ngModel)]="entranceFee.value"
  pattern="^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$"
  [ngClass]="{ 'is-invalid': entranceFee.touched && entranceFee.invalid }" >

<div *ngIf="entranceFee.invalid && entranceFee.touched" class="invalid-feedback">
  <div *ngIf="entranceFee.errors.pattern">Only numbers are permitted</div>
  <div *ngIf="entranceFee.errors.min">Value cannot be smaller than '0'</div>
</div>

---

这里有一个可供参考的工作示例StackBlitz。

---

正则表达式由这个答案提供。

- SiddAjmera