Как я могу сделать проверку в angular, чтобы тростник ввода занимал только цифры в шаблонном подходе

Question

У меня есть такой вид ввода. Как я могу сделать проверку, чтобы пользователь мог вводить только цифры, если он вводит строку, то я должен дать ему сообщение, что это запрещено

<input class="form-control"
                 id="price"
                 type="number"
                 placeholder="Price (required)"
                 required
                 [(ngModel)]="product.price"
                 name="price"
                 #priceVar="ngModel"
                 [ngClass]="{'is-invalid': (priceVar.touched ||
                                            priceVar.dirty || 
                                            product.id !== 0) &&
                                            !priceVar.valid }" />

Answer 1

Попробуйте:

<input class="form-control"
                 id="price"
                 type="number"
                 placeholder="Price (required)"
                 required
                 [(ngModel)]="product.price"
                 name="price"
                 #priceVar="ngModel"
                 pattern="^[1-9]+[0-9]*$" 
                 [ngClass]="{'is-invalid': (priceVar.touched ||
                                            priceVar.dirty || 
                                            product.id !== 0) &&
                                            !priceVar.valid }" />
<div *ngIf="priceVar.invalid && (priceVar.dirty || priceVar.touched)">
  <div *ngIf="priceVar.errors?.pattern">
     priceVar has to be a positive number !!
  </div>
</div>

Шаблон на входе гарантирует, что это положительное число. Наличие type="number" должно сделать это за вас (разрешены только цифры).

Вы также можете использовать атрибут required.

Хорошие источники для вас (https://angular.io/guide/form-validation, https://itnext.io/working-with-angular-2-form-template-driven-approach-58182fc73150).