2017-07-19 15 views
2

角度4の少し新しいです。ディレクティブ内の入力フィールドから変更イベントを取得しようとしています。現在、私はこれが正しく動作している@HostListener角度4のディレクティブの入力フィールドの変更イベントを取得する方法

@HostListener('keyup', ['$event']) 
    inputChanged(event) {} 

で働いていますが、このイベントは、間違った入力を入力して、あまりにもことを確認することができますすることができ、キーとユーザを解放するから、いくつかの遅延の後に解雇されました。私の実装では、私は無効な入力を削除しましたが、ユーザーにはあまり暴露されません。私が欲しいのは、入力フィールド(文字/文字列の入力または削除)で瞬時の変更が発生したときに、変更イベントを正しく取得することだけです。 現在のHTMLは、この

<input type='text' class="form-control" placeHolder='hh:mm:ss' time-input [(ngModel)]="params.time" name="time"/> 

PSのように見えます。 time-inputはディレクティブの名前であり、ディレクティブではイベントの変更を取得しようとしていますが、実装をコントローラまたはコンポーネントに移動したくありません。

+0

あなたは 'ngModel'ディレクティブからネイティブDOMイベントまたはイベントを取得したいですか? –

+0

イベント型を使用するための制限はありません.iは最初はネイティブDOMイベントを使用していましたが、問題はありましたが、@ gunterの答えが働いており、要件に準拠しています。 –

+0

DOMの 'input'イベントが必要ですネイティブ要素。ガンターの解決策は、 'input'に' ngModel'指示文がある場合にのみ機能します。あなたの 'time-input'は' ngModel'と一緒にしか使えません。スタンドアロンディレクティブとして使うことはできません。 –

答えて

4

使用

@HostListener('ngModelChange', ['$event']) 
+0

ありがとう。魅力のように働いた –

+0

聞いて嬉しいです:) –

+0

どうすればngModelを使用していませんか? – anaval

関連する問題