Have ion-input only accept 20 digit numbers? - ionic-framework

Question

I've tried using
<ion-input formControlName="LPNumber" type="number">
LPNumber: ['', [Validators.required, Validators.minLength(20), Validators.maxLength(20)]]
but that doesn't seem to validate.... in chrome at least. Is there a better way to validate a 20 digit number in Ionic 4?

Answer 1

So by design if your input type is "number" the maxLength will be ignored.
There are many ways to workaround this. I used this approach (hacky a bit):
<ion-item>
<ion-label>MaxLength 4</ion-label>
<ion-input onKeyPress="if(this.value.length==4) return false;"
type="number"></ion-input>
</ion-item>

Answer 2

<ion-input formControlName="LPNumber" minlength="20" maxlength="20" type="number">

Answer 3

My way to do this is by:
<ion-input type="number" (ionChange)="onNumberChange($event)"></ion-input>
...
onNumberChange($event) {
// checks of number only. Doesn't allow + - . for in input
$event.target.value = $event.target.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');
// checks for maxlength doesn't allow greater than specified length
$event.target.value = $event.target.value.length > 20 ? $event.target.value.substring(0, 20) : $event.target.value;
}

Answer 4

you can give type="text" then allow, but you give type="number" then not allow Validation, so you can give below like
page.html
<ion-item lines="none">
<ion-label position="stacked">Input Number</ion-label>
<ion-input formControlName="LPNumber" type="tel"></ion-input>
</ion-item>
<ion-item no-padding lines="none" class="validator-error"
*ngIf="property_form_step3.controls.LPNumber.hasError('required') && property_form_step3.controls.LPNumber.touched">
<p class="content">Please Enter Required Field!</p>
</ion-item>
<ion-item no-padding lines="none" class="validator-error"
*ngIf="property_form_step3.controls.LPNumber.hasError('maxlength') && property_form_step3.controls.LPNumber.touched">
<p class="content">Allow Only 20 Digits Number!</p>
</ion-item>
page.ts
LPNumber: [null, Validators.compose([Validators.maxLength(20), Validators.required])],
page.scss
.validator-error{
--background: transparent;
color: #d44848;
--min-height: 30px;
.content{
margin-bottom: 0px;
margin-top: 0px;
font-size: 12px;
}
}