تایپاسکریپت - فقط اعداد را در یک ورودی متنی با انگولار مجاز کنید

من در حال تلاش برای نوشتن کدی هستم که فقط اعداد را در یک ورودی متن اجازه دهد. من دیریکتیو زیر را نوشتهام.

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

@Directive({
    selector: '[appAllowNumberonly]'
})
export class AllowNumberonlyDirective {

    private el: HTMLInputElement;

    constructor(private elementRef: ElementRef) {
        this.el = this.elementRef.nativeElement;
    }

    @HostListener("keydown", ["$event"])
    onKeyDown(e: KeyboardEvent) {
        if (this.el.value == undefined) {
            this.el.value = '';
        }
        let transformedInput = this.el.value.replace(/[^0-9]/g, '');
        if (transformedInput != this.el.value) {
            this.el.value = transformedInput;
        }
    }

    @HostListener("keyup", ["$event"])
    onKeyUp(e: KeyboardEvent) {
        if (this.el.value == undefined) {
            this.el.value = '';
            e.preventDefault();
        }
        let transformedInput = this.el.value.replace(/[^0-9]/g, '');
        if (transformedInput != this.el.value) {
            this.el.value = transformedInput;
        }
        return transformedInput;
    }

    @HostListener("blur", ["$event.target.value"])
    onBlur(value) {
        if (this.el.value == undefined) {
            this.el.value = '';
        }
        let transformedInput = this.el.value.replace(/[^0-9]/g, '');
        if (transformedInput != this.el.value) {
            this.el.value = transformedInput;
        }
    }
 }

این بهخوبی کار میکند، اما کاربر میتواند مقداری وارد جعبه متن کند و سپس دستور من مقادیری که غیرعددی هستند را حذف میکند، اما من میخواهم از ورود کاربر به جعبه متن جلوگیری کنم، چگونه میتوانم به این هدف برسم؟

من میخواهم سناریوی کپی و چسباندن با ماوس را هم پوشش دهم.

من Plunker زیر را دارم که در AngularJS (1.x) کاملاً درست کار میکند، چگونه آن را به Angular تبدیل کنم؟ من نمیتوانم از تجزیهکنندهها استفاده کنم.

http://jsfiddle.net/thomporter/DwKZh/

من همچنین این را امتحان کردم:

پاسخ شماره ۱

شما میتوانید از ابزار Ng Knife استفاده کنید

1. وارد کردن NgKnifeModule

   ... 
   import { NgKnifeModule } from 'ng-knife';
   ...
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       NgKnifeModule
     ],
     ...
   });
   export class AppModule { }
   

2. استفاده از آن:

   <!-- Only Numbers -->
   <input knifeOnlyNumbers type="text">
   

پاسخ شماره ۲

این دستور را امتحان کنید. به رویداد ورودی گوش دهید تا کپی و چسباندن را نیز مدیریت کنید.

export class NumberOnlyDirective {
  constructor(private el: NgControl) {}

  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    // NOTE: use NgControl patchValue to prevent the issue on validation
    this.el.control.patchValue(value.replace(/[^0-9]/g, ''));
  }
}