如何仅检测Angular 2表单中已更改的字段？

Question

我使用FormGroup和FormControlstoghether与ngrx建立一个反应形式.此外,我正在使用Chrome redux的Inspector redux dev-tools.我想在跳过某些表单更改操作时正确呈现操作历史记录.目前,在最后一个表单操作之前跳过任何表单操作都不会进行投影,就像没有进行特定的表单更改一样.表单发送一个完整的对象,其中应用了所有字段.因此,之前操作的任何更改都会变得模糊,因为每个操作都会替换窗体状态的所有先前属性.

一点上下文: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动作选择更改的字段.是否有一个更简单的方法,不需要额外的库？内置于ng2表格中的东西？

谢谢!

编辑 ngOnChanges()对@Input装饰器具有类似的效果.表格有类似之处吗？

Answer 1

是的。尝试使用distinctUntilChanged方法。根据 keySelector 和比较器返回一个仅包含不同连续元素的可观察序列。

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