Jak wykrywać tylko zmienione pola w formularzach Angular 2?

Używam FormGroup i FormControls do używania z ngrx do budowania formularza reaktywnego. Używam również Inspectora reduxa Chrome redux dev-tools. Chcę poprawnie renderować historię działań, pomijając niektóre akcje zmiany formy. Obecnie pomijanie jakichkolwiek akcji formularza przed ostatnim nie będzie projektowane tak, jakby ta konkretna zmiana formy nie została wykonana. Formularz wysyła pełny obiekt ze wszystkimi zastosowanymi polami. Tak więc wszelkie zmiany poprzednich działań są zasłonięte, ponieważ każda akcja zastępuje wszystkie poprzednie właściwości stanu formularza.Jak wykrywać tylko zmienione pola w formularzach Angular 2?

Trochę kontekstu: Przechowuję w magazynie stanowym obiekt person, a użytkownik wypełnia formularz wewnątrz modalu. Następnie na submit wysyłam dane person do serwera.

Komponent forma

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

Reduktor:

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

Zastanawiam przy użyciu niektórych diff sprawdzania biblioteki, aby wybrać tylko te zmieniły pola dla następnego STASH_ACCOUNT_PERSON działania . Czy istnieje prostsza metoda, która nie wymaga dodatkowej biblioteki? Coś wbudowanego w formularze ng2?

Dzięki!

Edit ngOnChanges() ma podobny wpływ na @Input dekoratorów. Czy jest coś podobnego do formularzy?

Źródło

2017-02-12 Adrian Moisa

Tak. spróbuj użyć distinctUntilChanged method. Zwraca obserwowalną sekwencję, która zawiera tylko odrębne sąsiadujące elementy zgodnie z keySelector i porównywarką.

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

Źródło

2017-02-12 14:06:19

Dobrze, że wydaje się to nie jest konieczne rozwiązanie. Szukam czegoś, co porównuje poprzedni obiekt z nowym obiektem i renderuje listę zmian między tymi dwoma. Mimo to cieszę się, że nauczyłem się czegoś nowego. https://www.learnrxjs.io/operators/filtering/distinctuntilchanged.html –

Dzięki :) dla twojego rozwiązania możesz zobaczyć, że distinctUntilChanged daje ci starą wartość i nową wartość jako params funkcji. teraz, jak uzyskać tylko "zmienione" wartości z dwóch obiektów JSON: http://stackoverflow.com/questions/31295545/how-to-get-only-the-changed-values-from-two-json-objects . następnie zwróć używając operatora 'map' lub' switchMap'. mam nadzieję, że to pomocne! –

Można mieć przyjrzeć KeyValueDiffers i KeyValueDiffer w @angular/core

Źródło

2017-04-17 12:41:37

Jak wykrywać tylko zmienione pola w formularzach Angular 2?

Odpowiedz

Powiązane problemy