2017-02-12 33 views
6

Reaktif bir form oluşturmak için ngrxngrx ve FormControls 0ghkullanıyorum. Ayrıca Chrome redux redux dev-tools'un Müfettişini kullanıyorum. Bazı form değişikliği eylemlerini atlarken, işlemlerin tarihini düzgün bir şekilde oluşturmak istiyorum. Şu anda herhangi bir form eylemini atlamak, sonuncusundan önce bu özel form değişikliğinin yapılmadığı gibi yansıtılmayacaktır. Form, uygulanan tüm alanlarla birlikte tam bir nesne gönderir. Böylece, önceki eylemlerden herhangi bir değişiklik gizlenmez, çünkü her eylem formun tüm önceki özelliklerinin yerini alır.Angular 2 formlarında yalnızca değişen alanlar nasıl algılanır?

İçindekiler: Kullanıcı bir formun içinde bir form doldururken, person nesnesinde durum deposunda çalışıyorum. Sonra submit üzerinde person verilerini sunucuya gönderirim.

formu bileşeni

// 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)); 
    }); 

redüktör:

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

sonraki STASH_ACCOUNT_PERSON eylem için yalnızca değiştirilen alanları seçmek amacıyla bazı fark denetimi kitaplığı kullanarak düşünüyorum . Ek bir kütüphane gerektirmeyen daha basit bir yöntem var mı? Ng2 formlarına yerleşik bir şey mi?

Teşekkürler!

Düzenleme ngOnChanges()@Input dekoratörler için de benzer bir etkiye sahiptir. Formlar için benzer bir şey var mı?

cevap

1

Evet. distinctUntilChanged method kullanmayı deneyin. Sadece anahtar seçiciya ve karşılaştırıcıya göre farklı bitişik öğeleri içeren gözlenebilir bir dizi döndürür.

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

Well, içinde KeyValueDiffers ve KeyValueDiffer de göz atabilirsiniz. Önceki nesneyi yeni nesneyle karşılaştıran bir şey arıyorum ve ikisi arasında bir değişiklik listesi oluşturuyorum. Yine de, yeni bir şey öğrendiğime sevindim. https://www.learnrxjs.io/operators/filtering/distinctuntilchanged.html –

+0

Teşekkürler :) Çözümünüz için, distinctUntilChanged'in size eski değeri ve işlev paramları olarak yeni değeri verdiğini görebilirsiniz. şimdi, iki JSON nesnesinden yalnızca “değiştirilmiş” değerlerin nasıl alınacağı: http://stackoverflow.com/questions/31295545/how-to-get-only-the-changed-values-from-two-json-objects . sonra 'map' veya' switchMap' operatörünü kullanarak geri dönün. bunu faydalı umuyoruz! –

0

Bu gerekli bir çözüm değildir görünüyor @angular/core