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>

输入只接受numbers >= 0。但是每当我输入一个数字值（0-9）时，表格就会变得无效。为什么？当我在 ngAfterViewChecked() 的控制台中输出 ngModel 时，一个数值被写入模型。那么我该如何验证这个表单呢？是验证器有问题还是我脑子有问题？

当使用 and/or 和 input[type=text]

的反应形式实现此代码时，也会发生同样的情况

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>

Here's a Working Sample StackBlitz for your ref.

RegEx 礼貌 - This Answer

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

Validation error in angular input[type=number]?

validation

angular2-template

angular