Validation maxlength=n and only number( [0-9]{11})?

Ionic Framework ionic-v3
1

I am trying to validate citizenship number.
When I use type=“number” that allows dots and commas. Also I cant limit input size as 11-digits. I want my input allows ONLY numbers (0,1,2,3,4,5,6,7,8,9) and limits input length.

I tried code below;
<ion-input id="tcknInput" maxlength="11" pattern="[0-9]{11}" required [(ngModel)]="tckn" placeholder="{{'occ.login.CitizenShipNumber' | translate}}" type="text" (ionChange)="tcknOnInputChange()" ></ion-input>

tcknOnInputChange(){        
        $("#tcknInput").keyup(function() {
           $("#tcknInput").val(this.value.match(/[0-9]*/));
        });
      }
2

–> The maxlength attribute is not supported by the number type input
–> my solution is put input type as a “tel”, Because maxlength work with input type as a text & tel

Number
<ion-input type=“tel” maxlength=“10” clearInput [(ngModel)]=“userPhone”>

3

okey you are right. AIso I dont want dot and comma on keyboard

4

When you use type=“tel” “.(dot)” “,(comma)” not showing on keyboard in ios but not in android
for android, my solution display the Error message using ngModelCahnge check with a pattern

5

I am facing same issue. I still have dot and - . How do you solve it ? Thank you .

6

Use this.


<ion-input id="tcknInput" 
           maxlength="11" 
           pattern="[0-9]{11}" 
           required [(ngModel)]="tckn" 
           placeholder="{{'occ.login.CitizenShipNumber' | translate}}" 
           type="number" 
           (ionChange)="tcknOnInputChange()" 
            (keyup)="onlyNumberMaxLength($event,myValue.value,11)"
           #myValue>
</ion-input>


 onlyNumberMaxLength(evt,value , maxLength:any) {

    var keynum = evt ? evt.keyCode : evt.which;
    if ((keynum == 8) || (keynum == 46)) {
      return true;
    }
    //11 is a your value to comparate.
    if (cant == 11) {
      if (Number(String(value).length) == 11) {
        return true
      }
    }



    return /\d/.test(String.fromCharCode(keynum));
  }

To match use on keydown or keyup same.

matchNumber(value: string): boolean {
    if (value== '' || value == undefined) return
    let status = false;
    'use strict';
    var NUMBER_REGEX = /[0-9]*/{1,5}/;
    if (value.match(NUMBER_REGEX )) {
      status = true;
    }
    return status;
  }