Angular2 ngModel ein Zeichen hinter

Question

Ich habe ein Eingabefeld, in dem ich die Eingabe nach jedem Tastendruck validieren möchte. Letztendlich möchte ich es validieren, wenn sie außerhalb des Eingabefeldes klicken (nicht sicher, welches DOM-Ereignis dafür verwendet wird). Das Problem ist, dass die Eingabe um ein Zeichen "nacheilt".

Wenn der Benutzer beispielsweise "a" eingibt, ist die Variable ngModel, der zugeordnet ist, gleich "". wenn sie "ab" eingeben, ist die Variable gleich "a".

Teilcode von create-item.component.ts

export class CreateItem { 
    public item: Item; 

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

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

Eingabefeld create-item.component.html

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

Was mache ich falsch?

Answer 1

Das Ereignis blur wird ausgelöst, wenn ein Benutzer den Fokus auf ein Eingabeelement verliert.

Beispiel: Der Benutzer klickt außerhalb des Eingabefeldes.

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

Ich habe eine einfache Plunker erstellt diese es geändert haben

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

Answer 2

zu demonstrieren, während Sie tippen, Sie (keydown) verwenden können.

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

Answer 3

Sie können (ändern) Ereignis verwenden, wenn Sie die Eingabe bestätigen soll, wenn der Benutzer außerhalb des Eingabefeldes klickt und verwenden (ngModelChange) Ereignis, wenn Sie jeden Tastendruck überprüfen möchten.