Ошибка проверки в угловом входе [тип = число]?

Question

У меня странная проблема при попытке проверить input[type=number] в Angular 7 и я надеюсь, что кто-нибудь может помочь.

    <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), форма становится недействительной.Зачем?Когда я выводил ngModel в консоль в ngAfterViewChecked(), в модель было записано числовое значение.Итак, как я могу проверить эту форму?Есть ли ошибка в валидаторе или в моей голове?

То же самое происходит при реализации этого кода с реактивными формами и / или с 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>

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.

---

RegEx Courtesy - Этот ответ