2017-02-12 8 views
6

मैं FormGroup और FormControls का उपयोग कर रहा हूं ngrx के साथ एक प्रतिक्रियाशील रूप बनाने के लिए। इसके अलावा मैं क्रोम रेडक्स redux dev-tools के इंस्पेक्टर का उपयोग कर रहा हूं। मैं कुछ रूप परिवर्तन कार्यों को छोड़ते समय कार्यों के इतिहास को सही ढंग से प्रस्तुत करना चाहता हूं। वर्तमान में किसी भी फॉर्म एक्शन को छोड़कर आखिरी व्यक्ति प्रोजेक्ट नहीं करेगा जैसे कि उस विशिष्ट फॉर्म में बदलाव नहीं किया गया था। फॉर्म लागू सभी क्षेत्रों के साथ एक पूर्ण वस्तु भेजता है। इस प्रकार पिछले कार्यों से कोई भी परिवर्तन अस्पष्ट है क्योंकि प्रत्येक क्रिया फॉर्म के राज्य की सभी पिछली गुणों को प्रतिस्थापित करती है।कोणीय 2 रूपों में केवल बदले गए फ़ील्ड का पता कैसे लगाएं?

कुछ संदर्भ: मैं राज्य स्टोर में person ऑब्जेक्ट में छेड़छाड़ कर रहा हूं जबकि उपयोगकर्ता एक मोडल के अंदर एक फॉर्म भरता है। फिर submit पर मैं सर्वर पर person डेटा भेजता हूं।

प्रपत्र घटक

// Emit events when form changes 
this.personForm.valueChanges 
    .debounceTime(500) 
    .subscribe(person => { 

     // Block @Input person update from triggering a form change 
     if (this._personFormInputUpdated === true) { 

      // Reset @Input safe-guard 
      this._personFormInputUpdated = false; 

      return; 
     } 

     // Ignore unchaged form 
     if (!this.personForm.dirty) { return; } 

     debug('Person form changed'); 
     this.personChange.emit(Object.assign({}, person)); 
    }); 

कम करने:

case AccountsDataActions.STASH_ACCOUNT_PERSON: 
     newState = Object.assign({}, state, { 
      stashedAccountPerson: Object.assign({}, state.stashedAccountPerson, action.payload) 
     }); 
     debug('STASH_ACCOUNT_PERSON:', [newState.stashedAccountPerson]); 
     return newState; 

मैं क्रम में अगले STASH_ACCOUNT_PERSON कार्रवाई के लिए केवल बदल क्षेत्रों का चयन करने के कुछ diff की जाँच लाइब्रेरी का उपयोग पर विचार कर रहा हूँ । क्या कोई आसान तरीका है जिसके लिए अतिरिक्त लाइब्रेरी की आवश्यकता नहीं है? एनजी 2 रूपों में अंतर्निहित कुछ?

धन्यवाद!

संपादित ngOnChanges()@Input सज्जाकार के लिए एक समान प्रभाव पड़ता है। क्या फॉर्म के लिए कुछ समान है?

उत्तर

1

हां। distinctUntilChanged method का उपयोग करने का प्रयास करें। एक अवलोकन योग्य अनुक्रम देता है जिसमें कुंजी चयनकर्ता और तुलनाकर्ता के अनुसार केवल विशिष्ट संगत तत्व होते हैं।

this.personForm.valueChanges 
    .debounceTime(500) 
    .distinctUntilChanged() 
    .subscribe(person => { 
     // only what changed! 
    }); 
+1

ठीक है, ऐसा लगता है कि यह आवश्यक समाधान नहीं है में KeyValueDiffers और KeyValueDiffer पर देख सकते हैं। मैं ऐसा कुछ ढूंढ रहा हूं जो पिछले ऑब्जेक्ट की तुलना नई वस्तु के साथ करता है और दोनों के बीच परिवर्तनों की एक सूची प्रस्तुत करता है। Altough, मुझे खुशी है कि मैंने कुछ नया सीखा। https://www.learnrxjs.io/operators/filtering/distinctuntilchanged.html –

+0

धन्यवाद :) आपके समाधान के लिए आप देख सकते हैं कि विशिष्ट UnntilChanged आपको पुराने मान और फ़ंक्शन पैरा के रूप में नया मान देता है। अब, दो JSON ऑब्जेक्ट्स से केवल "बदले गए" मान कैसे प्राप्त करें: http://stackoverflow.com/questions/31295545/how-to-get-only-the-changed-values-from-two-json-objects । फिर 'मानचित्र' या 'स्विचमैप' ऑपरेटर का उपयोग करके वापस आएं। आशा है कि मददगार! –

संबंधित मुद्दे