Angular 2 中的块非数字指令

Question

这可能是最好的 angular 使用指令阻止非数字键的 2 种方法吗？

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

我建议使用text-mask组件。这是非常有用的。

``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

Angular 2 中的块非数字指令

block non number directive in Angular 2

event-handling

angular-directive

angular