Как я могу ограничить ввод специальных символов при вводе текста в ionic 3 в приложении Cordova?

Question

Я попытался ограничить ввод специальных символов в поле ввода Ionic.Например, вот мое поле ввода для номера мобильного телефона, который должен позволять вводить только цифры.Он должен блокировать все специальные символы и не должен разрешать буквы (az и AZ).Я уже пробовал с директивой onlyNumber, как упоминалось здесь.Но это не сработает.

Мне бы хотелось, чтобы, если это поле ввода, такое как номер мобильного телефона и номер стационарного телефона, оно блокировало все специальные символы и алфавиты (должно быть разрешено только цифры).).

Вот что я пробовал до сих пор

мой sample-input.html:

<ion-input type="tel" onlyNumber  class="mydate" [(ngModel)]="vm.landLineNumber" (tap)="landlinenos()" minlength="12" maxlength="12"
                               formControlName="landline" tabindex="1" (keyup)="moveFocus($event,password, false)"></ion-input>

Мои директивы onlyNumber.ts:

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();
    }
  }
}

И вот как я назвал в shared.module.ts:

import { OnlyNumber } from './directives/onlynumber.directive';
@NgModule({
    imports: [

  ],
  declarations: [
    OnlyNumber
  ],
    exports: [
        ComponentsModule
    ]
})


export class SharedModule { }

Я также попытался, указав его в импорте и экспорте, он показывает мне ошибку в качестве аннотации ngmodule.Когда я удалил из импорта и экспорта, он работает нормально без ошибок., Но мое требование не работает, как ожидалось.

Answer 1

Вы можете использовать Реактивные Формы.Попробуйте с этим: https://stackblitz.com/edit/angular-4jxvyq?file=src%2Fapp%2Fapp.component.ts