Angular2/TypescriptのngModelなしで入力フィールド値にアクセス

Question

私は、Angular2 Tour of Heroesチュートリアルのように、TypescriptをAngular2と一緒に使用しています。

changeイベントを添付したい入力フィールドがあり、フィールドが変更されたときにカスタムロジックが実行できるようにしました。私はロジックを実行するためにフィールドの現在の値を知る必要があるので、フィールドを変更する前に元の値を取得できるようになる前にプロパティをオーバーライドするので、そのフィールドをngModelでバインドする必要はありません。

だから私のようなものがあります：handleChangeに続いて

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

を：

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

    // Do some logic 

    obj.myField = newValue; 
} 

これはコードで正常に動作している間、活字体のコンパイラはラインnewValue : number = parseInt(e.target.value);

にエラー error TS2339: Property 'value' does not exist on type 'EventTarget'.を投げています

これを行う良い方法はありますか？

Answer 1

あなたがEventTargetの定義を参照した場合、それはvalueプロパティが含まれていません

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

、以下のようなものです。あなたは、あなたが使用することができます右の方法でそれをしたい場合は今

e.target['value'] 

あなたがinput type checkedに同じイベントを使用することなどのためのEventTargetには何の価値proertyがイベントの異なるタイプをサポートしないためにできている理由、

とその場合は checkedのプロパティを表示したいと考えています。

これが役立ちますように！

Answer 2

Angular2イベントはイベントのターゲットに直接アクセスできません。あなたは本当に生の要素を介してあなたの価値にアクセスすべきではありません、あなたは常にバインディングを使用する必要があります。

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" /> 

あなたが本当に要素にアクセスする必要がある場合、ElementRefクラスがあります。ただし、セキュリティ上の大きなリスクであり、ドキュメントの警告に注意する必要があります。

DOMに直接アクセスできるようにすると、アプリケーションがXSS攻撃を受けやすくなります。コード内のElementRefの使用を慎重に確認してください。詳細については、Security Guideを参照してください。

Answer 3

入力値の検証を行うには、changeイベントを使用する代わりにカスタムバリデーターを作成する方がよいでしょう。言っていることを、あなたはこのような入力への参照を使用して、入力値を渡すことができます

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

Answer 4

最も簡単な方法は、公式Get user input from a template reference variableを使用することです。したがって、あなたのTemplateの範囲内では、Componentにまったく影響しません。以下のような 何か：

<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; 
} 

ボーナスあなたはinputフィールドへEnterキーをバインドする必要がある場合、あなたは、迷惑なif($event.keyCode == 13) ...を書く代わりにKey event filtering羽を使用して行う必要はありませんです。

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