Question

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

一些上下文：当用户在模态中填写表单时，我在状态存储中存储了一个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 method。返回一个可观察序列，该序列根据keySelector和comparer仅包含不同的连续元素。

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

Answer 2

您可以查看KeyValueDiffers

中的KeyValueDiffer和@angular/core

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

2 个答案: