Ошибка проверки максимальной длины в Angular-7

Question

Я использую Angular-7 для своего проекта веб-портала.В одном из полей я использовал тип ввода чисел.Это позволяет пользователю использовать вертикальную полосу прокрутки для прокрутки от 1 до 20. Также я проверил максимальную длину как 2.

client.component.ts

numberOnly(event): boolean {
 const charCode = (event.which) ? event.which : event.keyCode;
 if ((charCode > 31) && (charCode < 48 || charCode > 57)) {
   return false;
   }
 return true;
}

client.component.html

<div class="col-xs-6">
   <label for="truck_required">Required Truck(s)<span style="color:red;"> *</span></label>
   <input type="number" (keypress)="numberOnly($event)" class="form-control" id="truck_required" placeholder="1,2,3..." min="1" max="20" name="truck_required" [(ngModel)]="form.truck_required" #truck_required="ngModel" [ngClass]="{'is-invalid' : truck_required.invalid && ((truck_required.dirty || truck_required.touched) || clientquoteForm.submitted)}" required maxlength="2">
   <div class="form-feedback" *ngIf="truck_required.invalid && ((truck_required.dirty || truck_required.touched) || clientquoteForm.submitted)" class="invalid-feedback">
   <div style="color:red;" *ngIf="truck_required.errors?.required"class="alert alert-danger">Required Truck(s) is required.</div>
</div>

Я ожидаю, что когда пользователь хочет печатать, максимальная длина должна быть 2, но приложение позволяет пользователю печатать на любую длину, как показано ниже.

Как мне решить эту проблему?

Answer 1

Вы предоставили max="20".пожалуйста, измените max="20" на max="2".не нужно указывать атрибут maxlength="2".Поэтому удалите атрибут maxlength="2" для числового поля.

<input type="number" (keypress)="numberOnly($event)" class="form-control" id="truck_required" placeholder="1,2,3..." min="1" max="2" name="truck_required" [(ngModel)]="form.truck_required" #truck_required="ngModel" [ngClass]="{'is-invalid' : truck_required.invalid && ((truck_required.dirty || truck_required.touched) || clientquoteForm.submitted)}" required>

и обновите этот метод как

numberOnly(event): boolean {
 if(event.target.value.length > 2)
{return false;}
 const charCode = (event.which) ? event.which : event.keyCode;
 if ((charCode > 31) && (charCode < 48 || charCode > 57)) {
   return false;
   }
 return true;
}