Angular2正規表現と一致しない文字を防ぐためのカスタムディレクティブ

Question

与えられたパターンと一致しない文字が入力に入力されないようにする指示文を作成しました。

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のような任意の文字を入力する場合、私は現在持っている唯一のバグが発生します。キーは私のディレクティブで防ぐことができますが、ngModelの値が空で何も表示されていなくても、文字は追加されているとみなされ、入力はvalidに設定されます。私はおそらくevent.preventDefault()する必要がありますが、私はどこにわからない。

Answer 1

私はそうすることによってsetTimeout()

にthis.ngModelChange.emit($event.target.value)

をカプセル化することによって、この問題を回避するために管理し、入力検証の後に再び再トリガされているので、私の入力の状​​態が正しく更新されます（したがって、requiredまたは他のバリデータで正しく使用することができます）。それは今のところうまくいくが、確かにちょっとハッキーだし、イベントのハンドラーが良い方が良い解決策につながるはずだ。

Answer 2

あなたがしようとしていることを理解している場合は、入力をtypingPatternに渡された正規表現でフィルタにかけたいと思っています。もしそうなら、あなたのngModelChange EventEmitterは、RegExによってチェックされ（そして清掃され）、「新しい値」を放出するはずです。したがって、ユーザーが1,2、yという順序で入力すると、ngModelChangeは1、12、12を出力する必要があります。

上記の場合、入力値の古い値を取り込む必要がありますキーダウンイベント。次に、各キーダウンで、新しい文字が受け入れ可能な場合は、入力の値をngModelChange.emitできます。しかし、新しい文字が受け入れられない場合は、以前に保存した古い値を放出する必要があります。

それは意味がありますか？