如何僅檢測Angular 2表單中已更改的字段？

我正在使用FormGroup和FormControls與ngrx建立反應形式。此外，我正在使用Chrome瀏覽器的Inspector redux dev-tools。我想在跳過某些表單更改操作的同時正確呈現操作的歷史記錄。目前在最後一個跳過任何表單操作之前不會投影，如果沒有進行特定的表單更改。表單發送一個完整的對象，其中應用了所有的字段。因此，以前操作的任何更改都會被遮蓋，因爲每個操作都會替換表單狀態的所有以前的屬性。如何僅檢測Angular 2表單中已更改的字段？

有點上下文：當用戶在模態中填充表單時，我正在存儲一個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裝飾類似的效果。是否有類似的形式？

來源

2017-02-12 Adrian Moisa

是的。嘗試使用distinctUntilChanged method。根據keySelector和比較器返回僅包含不同連續元素的可觀察序列。

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

來源

2017-02-12 14:06:19

嗯，看來這不是必要的解決方案看KeyValueDiffers和KeyValueDiffer。我正在尋找一些東西，將先前的對象與新對象進行比較，並呈現兩者之間的更改列表。儘管如此，我很高興我學到了一些新東西。 https://www.learnrxjs.io/operators/filtering/distinctuntilchanged.html –

謝謝:)你的解決方案，你可以看到distinctUntilChanged給你舊的價值和新的價值作爲函數參數。現在，如何從兩個JSON對象中只獲取「已更改」的值：http://stackoverflow.com/questions/31295545/how-to-get-only-the-changed-values-from-two-json-objects 。然後使用'map'或'switchMap'運算符返回。希望有幫助！ –

您可以在@angular/core

來源

2017-04-17 12:41:37

如何僅檢測Angular 2表單中已更改的字段？

回答

相關問題