Maxlength Validation failure in Angular-7

Question

I am using Angular-7 for my Web Portal project. In one of the fields, I used number input type. This allows the user to use vertical scrollbar to scroll between 1 to 20. Also, I validated the maxlength as 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>

I expect that when the user wants to type, the maxlength should be 2, but the application allows the user to type to any length as shown below.

How do I resolve this?

stackoverflow.com/questions/18510845/…

yurzui
– yurzui

2019-09-23 11:18:51 +00:00
Commented Sep 23, 2019 at 11:18 — yurzui
– yurzui, Commented Sep 23, 2019 at 11:18

Ramesh Rajendran · Accepted Answer · 2019-09-23 11:24:44Z

1

You have provided max="20" . please change max="20" to max="2". don't need to provide maxlength="2" attribute there. So remove the maxlength="2" attribute for number field.

<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>

and update this method as

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;
}

edited Sep 23, 2019 at 11:24

answered Sep 23, 2019 at 11:16

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ayobamilaye Over a year ago

- I did as you advised, but the problem is still there

Collectives™ on Stack Overflow

Maxlength Validation failure in Angular-7

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related