最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to detect only the changed fields in Angular 2 forms? - Stack Overflow

programmeradmin4浏览0评论

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?

Share Improve this question edited Feb 12, 2017 at 14:50 Adrian Moisa asked Feb 12, 2017 at 11:12 Adrian MoisaAdrian Moisa 4,3737 gold badges44 silver badges70 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

Yes. 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

发布评论

评论列表(0)

  1. 暂无评论