Angular2 ngModel 1文字後ろ

Question

各キーストローク後に入力を検証する入力フィールドがあります。最終的には、入力フィールドの外側をクリックしたときに検証する必要があります（これに使用するDOMイベントが不明）。問題は、入力が1文字遅れていることです。

たとえば、ユーザーが「a」を入力すると、マップされるngModel変数は「」と等しくなります。 「ab」と入力すると、変数は「a」に等しくなります。 の作成-item.component.tsを

export class CreateItem { 
    public item: Item; 

    constructor() { 
    this.item = new Item(); 
    } 

    onCheckItemInput() { 
    // validate input on each keystroke 
    } 
} 

入力フィールドの

部分的なコードが作成-item.component.html

<input class="form-control" type="text" required [(ngModel)]="item.name" 
    #spy pattern=".{3,255}" (input)="onCheckItemInput()"> 

私が間違って何をしているのですか？

Answer 1

blurイベントは、ユーザーが入力要素でフォーカスを失うたびに発生します。

例：ユーザーが入力ボックスの外側をクリックします。

<input class="form-control" type="text" required [(ngModel)]="item.name" 
#spy pattern=".{3,255}" (blur)="onCheckItemInput()"> 

私はそれが入力中、あなたは(keydown)を使用することができます変更するには、この

https://plnkr.co/edit/4wnanssu08WPRziMkh9d?p=preview

Answer 2

を実証するための簡単なplunkerを作成しました。

<input class="form-control" type="text" required [(ngModel)]="item.name" 
    #spy pattern=".{3,255}" (keydown)="onCheckItemInput()"> 

Answer 3

あなたは、各キーストロークを検証したい場合は、ユーザが入力フィールドの外でクリックしたときに入力を検証し、（ngModelChange）イベントを使用する場合は、（変更）イベントを使用することができます。