Angular-7中的最大长度验证失败

Question

我正在为我的Web Portal项目使用Angular-7。在其中一个字段中，我使用了数字输入类型。这允许用户使用垂直滚动条在1到20之间滚动。另外，我验证了maxlength为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"属性。因此，删除number字段的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;
}