Ionic-3 ion-input maxlength attribute not working

Question

I have tried to add ion-input for maxlength , max attribute but it's not working as per expectation.

<ion-input type="number" placeholder="*" maxlength="1"></ion-input>

<ion-input type="number" placeholder="*" max="1"></ion-input>

Anyone knows the solution for the same?

Thanks

Answer 1

According to this post: maxlength ignored for input type="number" in Chrome

Maxlength doesn't work on input type="number"

One alternative is suggested here: https://github.com/ionic-team/ionic/issues/7072 where dilhan119 suggests using type="tel"

A robust solution is to use a form validator, which will prevent form submission (and can show the user an error): https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/

Answer 2

I found my way out you can use below my code. great this about it is you can keep input type number so android will show keyboard of your desire

put this code in your form builder

phone: ['', [Validators.required, this.isValidNumber.bind(this)]]

in your ts file add below method

isValidNumber(fieldControl: FormControl) {
    if(this.formBuilderGroup) {
      return fieldControl.value.toString().length < 10 ? null : {
        NotEqual: true
      };
    }
  }

in above code change formBuilderGroup to whatever your form builder group name it is. change 10 to whatever you prefer length

Answer 3

HTML:
    <ion-textarea [(ngModel)]=“text” (ionChange)="textareaMaxLengthValidation()"></ion-textarea>
    <ion-input type="text" [(ngModel)]=“text” (ionChange)="textareaMaxLengthValidation()"></ion-input>


    TS:
    textareaMaxLengthValidation() {
        if (text.length > 50) {
       text= text.slice(0, 50);
        }