Ionic input (number) set maximum length

Ionic Framework ionic-v3
1

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

2

use form validation.

3

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

Ashley

4

Hello Everyone,

Can someone help please? Any suggestion?

Ashley

5

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>

6

hi @vnyksj,

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

Ashley

7

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.

8

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

9

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

10

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

11

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

12

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

Ashley

13

It works with type=“tel”

14

Thx, it worked without much code in controller

15

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

16

What should i import for the below code ?

this.cdRef.detectChanges();

17

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

18

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

19

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

20

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 ?