檢測對象何時更改Angular 5

Question

我試圖檢測對象何時改變。 該對象已連接到大型表單。 每當用戶更改輸入時，我希望它在頁面底部彈出保存/取消按鈕。

我的想法是只復制對象並執行*ngIf="object !== object_copy" ，如果命中了cancel，則將數據設置為復制的對象。 我不知道這是否正確的方法，因為我將使用兩次作為一個小任務很多變量做到這一點，但我只用angular的時間很短。 但是，我無法使用此方法，因為每當我進行類型復制時，對象都會丟失其類型。

有人可以幫我這個忙，還是可以找到一種更好的方法呢？

Answer 1

如果您使用的是Form，則可以利用Angular的表單控件，該控件會在任何時候以任何方式更改了表單及其任何值。 然后，您可以做一些簡單的事情：

form.dirty

甚至特定領域。 您可以使用Angular的反應式和模板表格來做很多事情。

https://angular.io/guide/forms

Answer 2

您必須訂閱一個事件來處理更改事件：

constructor(private formBuilder: FormBuilder) {
    this.myForm = formBuilder.group({
      name: 'Jose Anibal Rodriguez',
      age: 23
    })

    this.myForm.valueChanges.subscribe(data => {
      console.log('Form changes', data);
    })
  }

它應該工作。

Answer 3

ReactiveForm支持dirty屬性。 您可以使用“ myForm.dirty”檢查表單的臟狀態。

否則，可以使用getRawValue（）方法將表單的初始值設置為對象屬性。

this.initailFormValue = this.myForm.getRawValue();

然后只需使用

myForm.valueChanges.subscribe((value) => {

  this.updatedFormValue = this.myForm.getRawValue();

},
(err) => {
//
}
);

現在您有了初始和當前表單值。 您可以比較並進行其余操作。