How can I restrict the typing of special characters in my <ion-input> in my ionic 3 cordova app?

Ionic Framework ionic-v3
1

Hello friends, A warm good morning to one and all. I am new to this hybrid mobile development. I am using to get the details from the user such as mobile number, primary number etc. I need to restrict the special characters in those contact number related fields. How can I do that? I am really struggling to do this. Please help me out.
Here’s what I have done so far:
I have created a separate folder called directives inside shared folder. In that folder, I have created a separate ts(typescript) file called onlynumber.directive.ts and it has the following code:

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

@Directive({
  selector: '[onlyNumber]'
})
export class OnlyNumber {
debugger;
  constructor(private el: ElementRef) {}

  @HostListener('keydown', ['$event'])
  onKeyDown(event) {
    debugger;
  
    let e = <KeyboardEvent> event;
    if ([46, 8, 9, 27, 13, 110].indexOf(e.keyCode) !== -1 ||
      // Allow: Ctrl+A
      (e.keyCode === 65 && e.ctrlKey) ||
      // Allow: Ctrl+C
      (e.keyCode === 67 && e.ctrlKey) ||
      // Allow: Ctrl+X
      (e.keyCode === 88 && e.ctrlKey) ||
      // Allow: home, end, left, right
      (e.keyCode >= 35 && e.keyCode <= 39)) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
      e.preventDefault();
    }

  }

  @HostListener('contextmenu', ['$event'])
  onMouseRightClick(event) {
    if (event.which === 3) {
      let e = <MouseEvent>event;
      e.preventDefault();
    }
  }
}

Here’s how I have defined it in my shared.module.ts file:

shared.module.ts:

import { OnlyNumber } from './directives/onlynumber.directive';

@NgModule({
    imports: [
      
  ],
  declarations: [
    OnlyNumber
  ],
    exports: [
        ComponentsModule,
        
    ]
})

Here’s how I have used it in my :

<ion-item>
<ion-input no-border class="mydate" type="tel" onlyNumber [(ngModel)]="vm.mobileNumber" minlength="12" maxlength="12" (tap)="mobilecode()"
                               formControlName="mobile" tabindex="1" (keyup)="moveFocus($event,password, false)" Mask="(000) 000-0000"></ion-input>
</ion-item>

It doesn’t worked. Please help me. Thanks. I need some detailed steps to solve it.

2

See: https://github.com/assisrafael/angular-input-masks