Angular 2 Input Directive Ändern des Formularsteuerwerts

Question

Ich habe eine einfache Angular 2-Direktive, die den Eingabewert eines Textfelds ändert. Beachten Sie, dass ich den modellgesteuerten Formularansatz verwende.

@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); 

    } 

} 

Das dom wird ordnungsgemäß aktualisiert, das Modell wird jedoch nach jedem weiteren Tastendruck aktualisiert. Werfen Sie einen Blick auf die plnkr

Answer 1

Das begeistert mich, weil ich das früher angetroffen und war kratzen mir am Kopf.

das Problem Neubetrachtung, was Sie tun müssen, ist Ihre this.control.valueAccessor.writeValue(upper) zu ändern, in dem die ControlValueAccessor ausdrücklich auf das DOM-Element zu schreiben und nicht an der Steuerung selbst statt

this.control.control.setValue(upper); 

zu nennen, die auf den Wert ändern das Steuerelement und wird sowohl auf der Seite als auch in der Eigenschaft des Steuerelements korrekt wiedergegeben. https://angular.io/docs/ts/latest/api/forms/index/ControlValueAccessor-interface.html

A ControlValueAccessor abstrahiert die Operationen einen neuen Wertes mit einem DOM-Elemente Schreiben eine Eingabesteuerung darstellt.

Hier ist ein gegabelt Plunker: http://plnkr.co/edit/rllNyE07uPhUA6UfiLkU?p=preview

Answer 2

Ich war für so etwas suchen, aber wenn ich den Code in meinem Projekt wurde versucht, ich Fehler auf der Linie this.el.nativeElement.value.toUpperCase bekommen () gemäß dem obigen Arbeitsbeispiel von @silentsod.

geändert ich den Code zu:

let str:string = this.control.value; 
this.control.control.setValue(str.toUpperCase()); 

hier ein gegabelt Plunker: http://plnkr.co/edit/uf6udp7mQYmnKX6hGPpR?p=preview