Ionic 4 ion-input allow number only, restrict alphabet and special character

Question

I am creating an app in ionic4, I have a functionality where user can enter the only integer number (0-9), so I want to restrict any other character i.e alphabets, dot, plus everything.
I tried to restrict is using the following directive

 @HostListener('input', ['$event']) onInputChange(event) {
    this.inputElement = this._el.nativeElement.getElementsByTagName('input')[0];
    const initalValue = this.inputElement.value;
    this.inputElement.value = initalValue.replace(/[^0-9]*/g, '');
    if (initalValue !== this.inputElement.value) {
       event.stopPropagation();
    }
}

It is updating ngModel correctly but still, an invalid character is visible in the input field.

I tried another option as following

html

<ion-input type="text" placeholder="Enter number"
        [(ngModel)]="userCount" 
        name="userCount" 
        (ionInput)="countChange($event)">
 </ion-input>
 Usercount: {{userCount}}

Typescript

countChange(event) {
    event.target.value = event.target.value.replace(/[^0-9]*/g, '');
}

With above its printing value in HTML correct without invalid character, but its showing invalid character in input.

If I enter 5+ in input, the value in ngModel shows 5 but input field showing 5+

When I type 5++ and then type 5 again, input field shows 55 now.

How can I restrict input to accept only integer values [0-9]

Hey Divyesh. just create a directive like below answer provide and apply it anywhere in your code. — TheParam, Aug 07 '19 at 12:30
hi @DivyeshSavaliya, i too have the same requirement, can you please help me which one worked for you. thank you — Shaik, Jan 18 '21 at 13:03
I am able to do it using simple HTML input instead of using ionic input — Divyesh Savaliya, Jan 19 '21 at 16:03

score 24 · Answer 1 · edited Aug 18 '20 at 22:18

24

You should use keypress event Here is the example TS File

  numberOnlyValidation(event: any) {
    const pattern = /[0-9.,]/;
    let inputChar = String.fromCharCode(event.charCode);

    if (!pattern.test(inputChar)) {
      // invalid character, prevent input
      event.preventDefault();
    }
  }

HTML File

<ion-input type="text" placeholder="Enter number"
        [(ngModel)]="userCount" 
        name="userCount" 
        (keypress)="numberOnlyValidation($event)"
 </ion-input>

It will resolve your issue.

Using directive in Ionic 5:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appIntegerInput]'
})
export class IntegerInputDirective {

  constructor() { }

  @HostListener('keypress', ['$event'])
  onInput(event: any) {
    const pattern = /[0-9]/; // without ., for integer only
    let inputChar = String.fromCharCode(event.which ? event.which : event.keyCode);

    if (!pattern.test(inputChar)) {
      // invalid character, prevent input
      event.preventDefault();
      return false;
    }
    return true;
  }

}

HTML File

<ion-input appIntegerInput inputmode="numeric" type="number"></ion-input>

edited Aug 18 '20 at 22:18

Renato Probst

5,914
2
42
45

answered Aug 07 '19 at 12:20

Virendra Yadav

400
3
9

Tried this, not working. it's accepting + . ? ! everything and its also updating ngModel as well with all those special characters – Divyesh Savaliya Aug 07 '19 at 12:24
1

Hello please replace the line of the pattern with "const pattern = /[0-9]/;" – Virendra Yadav Aug 07 '19 at 12:38
Tried that, still no luck – Divyesh Savaliya Aug 07 '19 at 12:43
This works but text to speech will not run through this. (dealing with that now) – BHinkson Apr 06 '21 at 20:43
For those who is looking for ionic command to create this directive ionic g directive directives/integer-input – 1nstinct Apr 08 '22 at 03:32
This will not work with Chrome under Android as there is a known issue with some characters that cannot be prevented. – Mathieu Castets Feb 28 '23 at 13:55

felipesntsassis · Answer 2 · 2020-06-07T12:45:25.170

I solved my problem purging the alphabetic characters input following these steps:

I create a util class with method:

export class StringUtil {
 
    /**
     * Removes all non numeric characters from string.
     * @param str string
     */
    static removeNonNumerics = (str: string) => str.replace(/\D/g, '');

}

Created my directive:

import { Directive, HostListener } from '@angular/core';

import { StringUtil } from 'src/app/shared/utils/string.util';

@Directive({
    selector: '[appInputInteger]'
})
export class InputIntegerDirective {

    constructor() { }

    @HostListener('input', ['$event'])
    onInput(event: any) {
        event.target.value = StringUtil.removeNonNumerics(event.target.value);
    }

}

I've imported the InputIntegerDirective in my page module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { IonicModule } from '@ionic/angular';

import { DeliveryTimePageRoutingModule } from './delivery-time-routing.module';

import { DirectivesModule } from 'src/app/shared/directives/directives.module';
import { UiModule } from 'src/app/shared/ui/ui.module';
import { DeliveryTimePage } from './delivery-time.page';

@NgModule({
    imports: [
        CommonModule,
        DirectivesModule,
        FontAwesomeModule,
        FormsModule,
        IonicModule,
        DeliveryTimePageRoutingModule,
        ReactiveFormsModule,
        UiModule
    ],
    declarations: [DeliveryTimePage]
})
export class DeliveryTimePageModule { }

And finally used it at page:

<ion-input type="text" inputmode="numeric" formControlName="deliveryTime" maxlength="3" placeholder="Tempo de Entrega" [required]="true" appInputInteger>
</ion-input>

This directive worked well on the web browser and my mobile device too.

Remember to use type="text" inputmode="numeric" , if you use type="number" its not going to work because It will try to use .replace (string method) on an int value. inputmode="numeric" show only numbers keyboard (even on type text). Another option is to use type="tel". — Renato Probst, Aug 19 '20 at 12:32

score 0 · Answer 3 · answered Aug 07 '19 at 12:24

0

Change your code like this. I hope it will fix

countChange(event) {
   
   this.userCount += event.target.value.replace(/[^0-9]*/g, '');
}

<ion-input type="text" placeholder="Enter number"
         name="userCount" 
        (change)="countChange($event)">
 </ion-input>
 Usercount: {{userCount}}

answered Aug 07 '19 at 12:24

Velusamy Venkatraman

726
4
16

Tried this, its keep adding value, i.e if I type 5 and then + then it will show 55. After that, If I type 1 then it shows 55551 – Divyesh Savaliya Aug 07 '19 at 12:26
Yes, I tried. I am testing on android device and it's not working as expected. – Divyesh Savaliya Aug 07 '19 at 12:32

score 0 · Answer 4 · edited Mar 25 '20 at 09:53

Here is a very simple solution to your problem.

Step 1: Create a number-only directive and place it in a directive folder.

number-only.directive.ts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: 'input[numbersOnly]'
})
export class NumberDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(evt) {

    if (evt.which === 8 || evt.which === 0) {
        return true;
    }

    const regex = new RegExp("^[0-9\~]*$");
    var key = String.fromCharCode(!evt.charCode ? evt.which : evt.charCode);
    // console.log(regex.test(key))
    if (!regex.test(key)) {
        evt.preventDefault();
        return false;
    }
    return true;
  }

}

**Step 2: ** import it in a app.module file.

import { NumberDirective } from './directive/number-only.directive';
@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [NumberDirective],
  exports: []
})
export class AppModule { }

Step 3: Apply directive to input field like below.

  <input type="text" numbersOnly placeholder="Enter Mobile/Phone Number">

It is working with tag, but my problem is when we use , I tried with ion-input and its not working — Divyesh Savaliya, Aug 07 '19 at 12:37
I tried your updated answer, it's not working. to debug I console evt.which, its 0 for all the keys. its 0 with both ion-input and only input — Divyesh Savaliya, Aug 07 '19 at 12:55
Dear team, i am using ionic3 and we want stop to enter the numeric value in ion-input type box, please help me — Developer KE, Apr 28 '20 at 13:23

score 0 · Answer 5 · answered Apr 21 '22 at 04:24

Hi i achived this challenge none of the above solutions worked may be because they are outdated i am not sure but the way it worked for is by creating an attribute

bufferValue="";
isPaste=false;
@Input() maxlength=100;
@HostListener('ionInput',[$event]) ionInput($event){
   if((this.bufferValue.length+1>=$event.target.value.length || this.isPaste) && $event.target.value.length<=this.maxlength){
    this.numberInput($event.target);
    $event.srcElement.children[0].value=$event.target.value;
}
   else{
   $event.target.value=this.bufferValue;
}
}
@HostListener('keyup',['$event']) onKeyUp($event){
  if(this.bufferValue.length+1>=$event.target.value.length && $event.target.value.length<=this.maxlength){
  this.numberInput($event.target);
  $event.srcElement.children[0].value=$event.target.value;
}
else{
  $event.target.value=this.bufferValue;
}
}
@HostListener('ionChange',['$event']) ionChange($event){
  if(this.isPaste && $event.target.value.length<=this.maxlength){
    this.numberInput($event.srcElement.children[0]);
    $event.srcElement.children[0].value=$event.target.value
    this.isPaste=true;
}
this.bufferValue=$event.target.value;
}
@HostListener('paste')paste(){
 this.isPaste=true;
}
numberInput(target){
 target.value=this.removeNonNumberValue(target.value);
 this.bufferValue=target.value;
}
removeNonNumberValue(value){
  return value.replace(/[^0-9]/g,'');
}

how ever it had its own challenges auto fill wont work and in iphone when scan alphabets it will be filled

Ionic 4 ion-input allow number only, restrict alphabet and special character

5 Answers5