Zugriff auf Eingabefeldwert ohne ngModel in Angular2/Typescript

Question

Ich verwende Typescript mit Angular2, genau wie im Angular2 Tour of Heroes Tutorial.

Ich habe ein Eingabefeld, an das ich ein change Ereignis anhängen möchte, so dass einige benutzerdefinierte Logik ausführen kann, wenn das Feld geändert wird. Ich muss den aktuellen Wert des Felds kennen, um die Logik auszuführen, also möchte ich dieses Feld nicht mit ngModel binden, da dies die Eigenschaft überschreiben wird, bevor ich den früheren Wert abrufen kann, bevor er geändert wurde.

So habe ich so etwas wie:

<input (change)="handleChange(myObj, $event)" value={{ myObj.myField }}... /> 

Dann in handleChange:

handleChange (obj: MyObjectClass, e: Event) { 
    oldValue: number = obj.myField; 
    newValue : number = parseInt(e.target.value); 

    // Do some logic 

    obj.myField = newValue; 
} 

Während dies in Code funktioniert gut, das Typoskript Compiler wirft einen Fehler error TS2339: Property 'value' does not exist on type 'EventTarget'. auf der Linie newValue : number = parseInt(e.target.value);

Gibt es einen besseren Weg, dies zu tun?

Answer 1

Wenn Sie die Definition von EventTarget sehen, ist es wie unten,

interface EventTarget { 
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void; 
    dispatchEvent(evt: Event): boolean; 
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void; 
} 

es nicht die value Eigenschaft enthält. also, wenn Sie wollen, dass es in der richtigen Art und Weise tun, die Sie verwenden können,

e.target['value'] 

Jetzt ist der Grund, warum es kein Wert proerty auf Eventtarget ist, kann verschiedene Arten von Veranstaltungen zu unterstützen, zB für Sie gleiches Ereignis verwenden können für input type checked und In diesem Fall möchten Sie checked Eigentum sehen.

Hoffe das hilft !!

Answer 2

Die Angular2-Ereignisse haben keinen direkten Zugriff auf das Ziel des Ereignisses. Sie sollten wirklich nicht über das rohe Element auf Ihren Wert zugreifen, Sie sollten immer eine Bindung verwenden.

whatever.component.ts

export class WhateverComponent { 
    private tempField: any; 

    private handleChange(obj: MyObjectClass, e: Event) { 
     obj.field = this.tempField; 
    } 
} 

whatever.component.html

<input (change)="handleChange(myObj, $event)" [value]="tempField" /> 

Wenn Sie wirklich das Element zugreifen muss, gibt es die ElementRef Klasse. Dies ist jedoch ein schwerwiegendes Sicherheitsrisiko, und Sie sollten die Warnung in der Dokumentation beachten:

Wenn Sie direkten Zugriff auf das DOM zulassen, kann Ihre Anwendung anfälliger für XSS-Angriffe werden. Überprüfen Sie sorgfältig die Verwendung von ElementRef in Ihrem Code. Weitere Einzelheiten finden Sie unter Security Guide.

Answer 3

Um die Eingabewerte zu validieren, sollten Sie lieber einen benutzerdefinierten Validator schreiben, anstatt zu versuchen, das Änderungsereignis zu verwenden.Davon abgesehen, können Sie den Eingabewert unter Verwendung einer Bezugnahme auf die Eingabe wie folgt passieren:

<input #myInput (change)="handleChange(myInput.value, $event)" value={{ myObj.myField }}... /> 

Answer 4

Der einfachste Weg ist die offizielle Get user input from a template reference variable zu verwenden. so passiert es nur in Ihrem Template Umfang ohne die Component überhaupt zu beeinflussen. Etwas wie:

<input (change)="handleChange(myObj, newValue.value)" #newValue /> 

// Method keep the same 
handleChange (obj: MyObjectClass, e: Event) { 
    oldValue: number = obj.myField; 
    newValue : number = parseInt(e.target.value); 

    // Do some logic 

    obj.myField = newValue; 
} 

A Bonus ist, wenn Sie Enter Schlüssel zum input Feld binden müssen, Sie müssen nicht das lästige if($event.keyCode == 13) ... zu schreiben, verwenden Sie stattdessen die Key event filtering Feder und zu tun:

(keyup.enter)="onEnter(newvalue.value)"