Ionic input (number) set maximum length

Hi All,

Using ionic 2, How can we set a limit on the number of numbers in an input field? The hint I got is to use ngModelChange as keypress events do not work in android. I am still stuck on how to stop numbers from entering after the limit has exceeded.

              placeholder="Password (required)" 

The test variable will contain the old value. But how to stop numbers from entering after the length has exceeded a number?


use form validation.

Form validation just validates the input field and gives out a message. it does not stop the user from entering.


1 Like

Hello Everyone,

Can someone help please? Any suggestion?


Hi @ashley_shookhye

I guess you looking for this,
<ion-input type="number" max="10"></ion-input> .
It will restrict the your from entering the number more then 10 and you can also set min value in similar way.
For Password you can try something like this,
<ion-input type="password" maxlength="10"></ion-input>

1 Like

hi @vnyksj,

Thanks for the reply. It does not work. It still allows me to enter more than the specified number.


Hi @ashley_shookhye,

You could use the maxlength HTML attribute and also you can use it with ionic 2 in below mentioned way.

<ion-input type="text" [(ngModel)]="VarificationCode" [attr.maxlength]="4"></ion-input>

I have used it for text type of field. May be it will also work for the password type of field as well.

Hope this will help you.

1 Like

hello @addwebsolution,

For type = text, maxlength works but I want to limit the number of numbers in an input field of type number.

I can’t find any solution yet :(. Thanks for helping.


1 Like

I have the same issue. Have you found any solution?


Yes. use ngModelChange as follows in your template:

              placeholder="Username (required)"

Then in your ts
You have to import ChangeDetectorRef

    //manually launch change detection
    this.username = value.length > 8 ? value.substring(0,8) : value;



Thanks, but I already knew this trick, I was more thinking about something using length or max etc… Anyway thank you for replying quickly.

If you are targetting ios, i think they do recognize keypress.


It works with type=“tel”


Thx, it worked without much code in controller

It worked but both string and number input available.
How can disable string input?

What should i import for the below code ?


1 Like

import { ChangeDetectorRef } from '@angular/core';

1 Like

The maxlength attribute is not supported by the number type input.


Yes but type tel allows alphabetics characters it’s not suitable if you are trying to get numbers only

sir how to sue value attribute with number in my case i have used both value as well as use type=“number” but value is not show in the field after user number ?