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 ponent
// 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?
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 ponent
// 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?
2 Answers
Reset to default 3Yes. try to use distinctUntilChanged method. Returns an observable sequence that contains only distinct contiguous elements according to the keySelector and the parer.
this.personForm.valueChanges
.debounceTime(500)
.distinctUntilChanged()
.subscribe(person => {
// only what changed!
});
You can have look at KeyValueDiffers
and KeyValueDiffer
in the @angular/core