कोणीय 2 फ़ील्ड प्रोग्रामेटिक रूप से

Question

अद्यतन करना मेरे पास निम्न फ़ॉर्म फ़ील्ड है जो ठीक काम करता है। इसके द्वारा, मेरा मतलब है कि जब मैं फ़ील्ड में टाइप, पेस्ट इत्यादि टाइप करता हूं, तो fooObj.expDate वास्तविक समय में ठीक हो जाता है और सत्यापन होता है। मेरे पास यह स्पष्ट करने के लिए मेरे पास प्री-टैग है।

<pre>{{fooObj.someDate | json}}</pre> 

    <div class="form-group inline-form__input"> 
    <label for="someDate">Some Date</label> 
    <input tabindex="2" 
      type="tel" 
      class="form-control" 
      maxlength="7" 
      placeholder="MM/YY" 
      formControlName="someDate" 
      name="someDate" 
      [(ngModel)]="fooObj.someDate" 
      someDate> 
    </div> 

हालांकि, मेरे पास इस क्षेत्र पर someDate निर्देश है। यह निर्देश पेस्ट घटनाओं को रोकता है। यह पेस्ट घटना को रद्द करता है, इनपुट के कुछ फैंसी स्वरूपण करता है और फिर इस करता है:

target.value मेरी someDate क्षेत्र है। इनपुट इनपुट बॉक्स के अंदर मूल्य ठीक हो जाता है (मुझे लगता है कि यह इनपुट के अंदर स्क्रीन पर बदल जाता है)। हालांकि, fooObj.someDate अद्यतन नहीं है और सत्यापन नहीं होता है। जैसे एक टाइमआउट में लक्ष्य मान सेट करना एक ही सत्यापन/ऑब्जेक्ट अपडेट को कुंजी/पेस्टिंग/किसी अन्य जावास्क्रिप्ट ईवेंट टाइप करने के रूप में ट्रिगर नहीं करता है।

कोणीय अद्यतन बाइंडिंग (और इसलिए स्क्रीन) केवल तभी एप्लिकेशन ऐसे कीस्ट्रोक्स अतुल्यकालिक घटनाओं, के जवाब में कुछ करता है:

कोणीय docs इस पर कहने के लिए बहुत उपयोगी नहीं है। यह उदाहरण कोड कुंजीपटल ईवेंट को 0 नंबर पर बांधता है, सबसे छोटा टेम्पलेट स्टेटमेंट संभव है। हालांकि कथन कुछ भी उपयोगी नहीं है, यह कोणीय की आवश्यकता को पूरा करता है ताकि कोणीय स्क्रीन को अपडेट कर सके।

तो, मैं उस क्षेत्र के निर्देश से फ़ील्ड का अद्यतन कैसे ट्रिगर करूं?

संपादित करें: मैं के रूप में कोड अपने तत्व पर यहां पाया का उपयोग करके टिप्पणियों में सिफारिश तत्व पर किसी ईवेंट को ट्रिगर करने की कोशिश की: How can I trigger an onchange event manually?

चलाता है ठीक है, लेकिन अद्यतन करने के लिए क्षेत्र के लिए मजबूर नहीं करता है:

if ("createEvent" in document) { 
    var evt = document.createEvent("HTMLEvents"); 
    evt.initEvent("change", false, true); 
    this.target.dispatchEvent(evt); 
    } 
    else 
    this.target.fireEvent("onchange"); 

इसके अलावा, यहां पर मुझे सिंथेटिक घटनाओं का विचार मिल रहा है, जो कि "सामान्य" क्रियाओं को एक कुंजीडाउन या जो कुछ भी करेगा (मैं वास्तव में उम्मीद कर रहा हूं कि मैं गलत पढ़ रहा हूं या वे इस उपयोग के मामले में गलत हैं, लेकिन यह ' पेस्ट इवेंट को फिर से जारी करने की कोशिश करने के साथ काम नहीं करते): https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces

नोट: सिंथेटिक घटनाओं में डिफ़ॉल्ट कार्य नहीं होते हैं। दूसरे शब्दों में, जबकि ऊपर की लिपि एक पेस्ट घटना को आग लग जाएगी, डेटा वास्तव में दस्तावेज़ में चिपकाया नहीं जाएगा।

Answer 1

मुझे आपके निर्देश का विवरण नहीं पता है, हालांकि मैं आपके इरादों के अनुमान लगा सकता हूं। के साथ, हम हमारे नियंत्रण से valueChanges नमूदार की सदस्यता के लिए जा रहे हैं शुरू करने और दो तरह से नियंत्रण पर सीधे बंधन सिर्फ अत्यधिक लेखन और चेक से बचने के लिए त्याग करने के लिए:

form.html

<input tabindex="2" 
      type="tel" 
      class="form-control" 
      maxlength="7" 
      placeholder="MM/YY" 
      formControlName="someDate" 
      name="someDate" 
      someDate /> 

form.ts

यहां वह जगह है जहां हम सदस्यता लेते हैं (यह कन्स्ट्रक्टर से बाहर निकल सकता है, जब आप फॉर्म बना रहे हैं) पर निर्भर करता है।

constructor() { 
    this.myForm = new FormGroup({ 
     someDate: new FormControl(''), 
    }); 

    this.myForm.controls['someDate'].valueChanges.subscribe(
     value => this.fooObj.someDate = value; 
    ); 
    } 

कुछ-date.directive.ts

निर्देश नियंत्रण में मूल्य और valueChanges के लिए सदस्यता तो हमारे मॉडल अद्यतन करेगा लिखेंगे। यह एक पेस्ट इवेंट और हर दूसरी घटना पर काम करता है (इसलिए आप लक्षित घटनाओं को सीमित कर सकते हैं, लेकिन मैं कम से कम काम करना सुनिश्चित करना चाहता था)। केवल onpaste घटनाओं पर कब्जा करने के

@Directive({ 
    selector: '[someDate]' 
}) 
export class SomeDateDirective{ 
    constructor(private el: ElementRef, private control : NgControl) { 

    } 

    @HostListener('input',['$event']) onEvent($event){ 
    $event.preventDefault(); 
    let data = $event.clipboardData.getData('text'); 
    setTimeout(() => { 
     this.control.control.setValue(data.toUpperCase()); 
    }, 3000); 
    } 
} 

input के बजाय paste को बदलें। preventDefault() के साथ यह थोड़ा अजीब है क्योंकि इनपुट थोड़ी देर के लिए प्रभावी ढंग से गायब हो जाता है।

यहाँ एक plunker है: http://plnkr.co/edit/hsisILvtKErBBOXECt8t?p=preview