How to detect only the changed fields in Angular 2 forms?

Question

I am using FormGroup and FormControls toghether with ngrx to build a reactive form. Also I'm using the Inspector of the Chrome redux redux dev-tools. I want to properly render the history of actions while skipping some form change actions. Currently skipping any form action before the last one will not project as if that specific form change was not made. The form sends a full object with all the fields applied. Thus any change from previous actions is obscured because each actions replaces all previous properties of the form's state.

A bit of context: I am stashing in state store a person object while the user fills up a form inside a modal. Then on submit I send the person data to the server.

The form component

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

The reducer:

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

I am considering using some diff-checking library in order to select only the changed fields for the next STASH_ACCOUNT_PERSON action. Is there a simpler method that doesn't require an additional library? Something built-in into ng2 forms?

Thanks!

Edit ngOnChanges() has a similar effect for @Input decorators. Is there something similar for forms?

Answer 1

Yes. try to use distinctUntilChanged method. Returns an observable sequence that contains only distinct contiguous elements according to the keySelector and the comparer.

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