检测对象何时更改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) => {
//
}
);

现在您有了初始和当前表单值。 您可以比较并进行其余操作。