preventDefault not working on ionic on <input type=“number”>

Ionic Framework ionic-v3
1

I am trying to build a input field which will only take number as input so it’s input type is number. But I want limit the number lenght to 6 digits, using below code:

home.html

 <ion-item text-left >
 <input type="number" (keypress)="delimiterClainNo($event, $event.target.value)" id="claim" placeholder="Claim No." (ngModel)]="claim" />
 </ion-item>

home.ts

export class HomePage {

claim : string;
amount : number;
status : string;
expenseType : string;
description : string;
beneficiary : string; 

constructor(public navCtrl: NavController, private alertCtrl: AlertController) {
}

delimiterClainNo(event: Event, value: string){

if(value.length > 5) {
      event.preventDefault();
 }
}

display(caption : string, value : any): void { 
   let alert = this.alertCtrl.create({
   title: caption,
   subTitle: value,
   buttons: ['Close']
  });
  alert.present();
 }
}
  1. This should work on mobile device. Not works on my Android 4.4.2 (Samsung Galaxy Note 2).
  2. Works fine on browser and android emulator, but not in mobile.

System Info

cli packages: (C:\Users\vcinq\AppData\Roaming\npm\node_modules)
@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1
local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.1

System:

Android SDK Tools : 26.0.2
Node              : v6.11.2
npm               : 3.10.10
OS                : Windows 10

Misc:

backend : legacy

Can anybody help me? I’ve been banging my head 'cause of this more thana headbanger attending to a Slayer concert.

1 Like
2

Missing an opening square bracket on the ngModel.

<ion-item text-left >
    <input type="number" 
        (keypress)="delimiterClainNo($event, $event.target.value)" 
        id="claim" placeholder="Claim No." 
 ---->  (ngModel)]="claim" />
</ion-item>

What happens when you add it?

3

try pattern attribute to achieve this. it is very easy

pattern="([0-9]{8})"

pattern Attribute in ion-input

4

It was just a type after cutting and copying, formating the text. The code is correct, no missing square brackets.

5

Is there any difference if you put the input inside an ion-input?

  <ion-item text-left>
    <ion-input type="number"
    (keypress)="delimiterClainNo($event, $event.target.value)"
    id="claim" placeholder="Claim No."
    [(ngModel)]="claim"></ion-input>
  </ion-item>
6

This doesn’t work even in browsers and android emulator.

Even pure HTML doesn’t work (tested on a blank page on Chrome)

<input type="number" pattern="([0-9]{8})"></input>

7

then you have to check length of your input module
just add [(ngModel)]=“password” in ion-input tag

and
in ts file
if (typeof (this.password) == ‘undefined’ || this.password.length != 6) {
ShowMessage(“Error|Please enter alleast 6 character password”);
}

it will work surely

8

@vcinquini Here the another Solution which is implemented in my Project and Work 100%

var numericReg = /(^[0-9]{10}$)/g;
            if (numericReg.test(this.terminationDetail.phone)) {
            this.Service.showToast("Phone Number not Supported");
            return;
            }
9

Haven’t tried that. I’m at work now, i’ll try later at home.

10

Let me see if i get you right. I don’t want a password field, I want a number field (it only would accept numbers and in mobile devices, it needs to avctivate numberpad keyboard) that only 6 digits length.
It’s a field where user will type a claim insurance number, can’t be password, must be visible.

Is this a trick that will make this field appears as number field but will be treated as password on ts code, so I can fix that?

11

this is just demo of my project so i put it as it is
you can take type=number in ion-input tag with [(ngModel)]=“anyNameyouwish”.

then define those model in ts file as string
and when user submit claim insurance number chekck the codition

if (typeof (this.anyNameyouwish) == ‘undefined’ || this.anyNameyouwish.length != 6) {
ShowMessage(“Error|Please enter alleast 6 character password”);
}