Html Angular2自定义指令，用于防止字符不'；不匹配正则表达式

我确实创建了一个指令，它可以防止在输入中键入任何与给定模式不匹配的字符

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


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

export class TypingPatternDirective  {

 @Input() typingPattern: string
 @Input() ngModel
 @Output() ngModelChange = new EventEmitter()
 @Input() global: boolean = true // Global modifier
 private oldValue: any

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

 @HostListener('input', ['$event'])
 onInput($event) {
   if (!$event.target.value.match( new RegExp(this.typingPattern, this.global ? 'g' : '')) ) {
     $event.target.value = this.oldValue.trim()
   }
   this.ngModelChange.emit($event.target.value)
 }

 @HostListener('paste', ['$event'])
 onPaste($event) {
   this.onInput($event)
 }
}

下面是我如何在输入元素上使用它：

 <input type="text" [ngModel]="..." [typingPattern]="$[0-9]{0,8}^" required>

---

如果在特定的示例中键入任何字符，如

h

，则会出现当前唯一的错误。我的指令将阻止该键，但所需属性将被视为已添加字符，从而将输入设置为

valid

，即使我的ngModel值为空且未显示任何内容。我可能需要

event.preventDefault（）

，但我不确定在哪里

如果我理解了您的意图，那么您希望通过传递给typingPattern的正则表达式过滤掉您的输入。如果是这样，那么您的ngModelChange EventEmitter应该在RegEx检查（并清理）后发出“新值”。因此，如果用户按顺序键入：1，2，y，那么您的ngModelChange应该发出：1，12，12

如果上述情况属实，则需要在keydown事件之前捕获输入的旧值。然后，在每次按下键时，如果新字符是可接受的，则可以ngModelChange.emit输入值。但是，如果新字符不可接受，则应发出以前存储的旧值

---

这有意义吗？

我通过封装

this.ngModelChange.emit（$event.target.value）

在

setTimeout（）中

这样，输入验证将在之后再次触发，从而正确更新输入的状态（因此指令可以与
所需的
或其他验证器一起正确使用）。目前它还可以工作，但肯定有点不成熟，更好的事件处理程序应该会带来更好的解决方案。
你是对的，事实上就是这样。我唯一的问题是，它似乎与其他验证器不同步，比如说“必需”。对此我能做些什么？为什么不改用模式验证器呢？我知道情况并非如此，但这是一种方法