Ionic 4 ion-input allow number only, restrict alphabet and special character
You should use keypress eventHere is the exampleTS 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>
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.
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}}