Angular2 打字模式指令

Question

我正在寻找一个可以添加到输入的指令（因此使用 ngModel），它可以防止键入或粘贴任何与给定模式不匹配的字符串。

我确实设法通过在keypress 中更新模型来编写，但我不知道如何处理复制和粘贴的事情。

这是我到目前为止所写的：

import { Directive, Input, HostListener, EventEmitter } from "@angular/core"


@Directive({
  selector: '[ngModel][typingPattern]'
})

export class TypingPatternDirective  {

  @Input() typingPattern: string
  @Input() ngModel
  @Output() ngModelChange = new EventEmitter()
  private oldValue: any

  /* On key down, we record the old value */
  @HostListener('keydown', ['$event'])
  onKeyDown($event) {
    this.oldValue = $event.target.value
    if($event.keyCode === 32) { // Prevent space key
        $event.preventDefault()
    }
  }

  /* On changing value, we check if the max length is reached. If not, we do nothing, otherwise we put the old value */
  @HostListener('keypress', ['$event'])
  onKeypress($event) {
    if ( !$event.target.value.match( new RegExp(this.typingPattern))) {
      $event.target.value = this.oldValue.trim()
      this.ngModelChange.emit($event.target.value)
    }
  }

}

正如我所提到的，这不涉及复制和粘贴。我想始终在 input 元素上使用此指令（因此我想确保它确实更新了 InputComponent 错误状态，但现在不是这种情况）。

Answer 1

尝试使用npm install angular2-text-mask，我认为它适合您的需求。