कोणीय 2 इनपुट निर्देश संशोधित फॉर्म नियंत्रण मान

Question

मेरे पास एक साधारण कोणीय 2 निर्देश है जो टेक्स्टबॉक्स के इनपुट मान को संशोधित करता है। ध्यान दें कि मैं मॉडल-संचालित फॉर्म दृष्टिकोण का उपयोग कर रहा हूं।

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

    } 

} 

डोम ठीक से अद्यतन करता है, हालांकि मॉडल हर दूसरे कीस्ट्रोक के बाद अद्यतन करता है। plnkr

Answer 1

पर यह नज़र डालें क्योंकि यह मुझे रोमांचित करता है क्योंकि मुझे इससे पहले सामना करना पड़ा था और मेरे सिर को खरोंच छोड़ दिया गया था।

मुद्दा रिविजिटिंग, आप क्या करने की जरूरत है अपने this.control.valueAccessor.writeValue(upper) बदलने के लिए जहां ControlValueAccessor स्पष्ट रूप से नहीं DOM एलीमेंट लिए लिख रहा है और नियंत्रण के लिए ही बजाय

this.control.control.setValue(upper); 

जिस पर मूल्य बदल जाएगा कॉल करने के लिए है नियंत्रण और पृष्ठ पर और नियंत्रण की संपत्ति दोनों में सही ढंग से परिलक्षित होता है। https://angular.io/docs/ts/latest/api/forms/index/ControlValueAccessor-interface.html

एक ControlValueAccessor DOM तत्व के एक इनपुट नियंत्रण का प्रतिनिधित्व करने के लिए एक नया मूल्य लिखने के संचालन सार।

यहाँ एक काँटेदार plunker है: http://plnkr.co/edit/rllNyE07uPhUA6UfiLkU?p=preview

Answer 2

मैं कुछ इस तरह के लिए देख रहा था, लेकिन जब मैं अपने प्रोजेक्ट में कोड की कोशिश की मैं लाइन this.el.nativeElement.value.toUpperCase पर त्रुटियों हो रही थी () @silentsod द्वारा दिए गए कार्य उदाहरण के अनुसार। http://plnkr.co/edit/uf6udp7mQYmnKX6hGPpR?p=preview