ブロック2の数字以外のディレクティブをブロックする

Question

ディレクティブを使用して非数値キーをブロックするには、これが最良の2ウェイですか？私は、これは、ユーザがNUMだけを入力できるようにするために使用しています

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

@Directive({ 
    selector: '[blockNonNumber]' 
}) 

export class blockNonNumberDirective { 

    @HostListener('keydown', ['$event']) onKeyDown(event: any) { 
     let keyCode = [8, 9, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110]; 
     if (keyCode.indexOf(event.which) === -1) event.preventDefault(); 
    } 
} 

Answer 1

、

export class blockNonNumberDirective { 
    constructor() { } 

    @HostListener('keypress') onkeypress(e){ 
    let event = e || window.event; 
    if(event){ 
     return this.isNumberKey(event); 
    } 
    } 

    isNumberKey(event){ 
    let charCode = (event.which) ? event.which : event.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 57)){ 
     return false; 
    } 
    return true; 
    } 
} 

Answer 2

は、私は、テキストマスクコンポーネントを使用することをお勧めします。それは非常に便利です。

``typescript 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { TextMaskModule } from 'angular2-text-mask'; 

@NgModule({ 
    imports: [ 
    FormsModule, 
    TextMaskModule 
    ], 
    declarations: [] 
}) 
export class MyModule {} 
``` 

Then, use it in your component: 
```typescript 
@Component({ 
    selector: 'app', 
    template: ` 
    <input [textMask]="{mask: mask}" [(ngModel)]="myModel" type="text"/> 
    ` 
}) 
export class AppComponent { 
    public myModel = '' 
    public mask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/] 
} 
``` 

text-mask