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.

   <ion-item>
          <ion-input 
              type="password" 
              placeholder="Password (required)" 
              [ngModel]="test"
              (ngModelChange)="get($event);test=$event;"></ion-input>
  </ion-item>

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

Ashley

use form validation.

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

Ashley

1 Like

Hello Everyone,

Can someone help please? Any suggestion?

Ashley

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.

Ashley

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.

Ashley

1 Like

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

Hello,

Yes. use ngModelChange as follows in your template:

<ion-input 
              type="number" 
              placeholder="Username (required)"
              required 
              [(ngModel)]="username"
              (ngModelChange)="change($event)"
              name="username"
              #usernameVar="ngModel"> 
          </ion-input>

Then in your ts
You have to import ChangeDetectorRef

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

Ashley

5 Likes

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.

Ashley

It works with type=“tel”

3 Likes

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 ?

this.cdRef.detectChanges();

1 Like

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

1 Like

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

2 Likes

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 ?