角2の入力指令フォームの制御値を変更する

Question

私は、テキストボックスの入力値を変更する単純なAngular 2指令を持っています。私はModel-Driven形式のアプローチを使用しています。

@Directive({ 
    selector: '[appUpperCase]' 
}) 
export class UpperCaseDirective{ 

    constructor(private el: ElementRef, private control : NgControl) { 

    } 

    @HostListener('input',['$event']) onEvent($event){ 
    console.log($event); 
    let upper = this.el.nativeElement.value.toUpperCase(); 
    this.control.valueAccessor.writeValue(upper); 

    } 

} 

DOMは正しく更新されますが、モデルは他のキーストロークごとに更新されます。 plnkr

Answer 1

これは私が以前これに遭遇し、私の頭を傷つけていたので、これは私を興奮させる。あなたが何をする必要があるか、問題を再考

はControlValueAccessorが明示的に代わりに値を変更します

this.control.control.setValue(upper); 

を呼び出すためにDOM要素にではなく、コントロール自体に書き込んでいるあなたthis.control.valueAccessor.writeValue(upper)を変更することですコントロールとページとコントロールのプロパティの両方に正しく反映されます。 https://angular.io/docs/ts/latest/api/forms/index/ControlValueAccessor-interface.html

A ControlValueAccessorは、入力された制御を表すDOM要素に新しい値 の書き込み動作を抽象化します。

ここフォークplunkerです：（私はこのような何かを探していたが、私は私のプロジェクトにコードをしようとしたとき、私はラインthis.el.nativeElement.value.toUpperCase上のエラーを得ていたhttp://plnkr.co/edit/rllNyE07uPhUA6UfiLkU?p=preview

Answer 2

）@silentsodによって与えられた上記の作業例に従ってください。

私は、コードを改正： http://plnkr.co/edit/uf6udp7mQYmnKX6hGPpR?p=preview