角反应形式关键变化检测答案

【问题标题】：Angular reactive forms key changes detection角反应形式关键变化检测
【发布时间】：2021-12-26 06:16:37
【问题描述】：

使用 Angular Reactive Forms 给定 valueChanges 监听器

this.companyForm.valueChanges.subscribe((value) => {
  console.log('setChangesListener value', value);
});

如何找到确切更改的字段？

【问题讨论】：

记录值时会得到什么？
比较查看表单的值变化，可以通过this.companyForm.controls.xxx.valueChanges.subscribe查看表单控件值的变化...
您可以订阅单个 FormControls 的 valueChanges（或更好地使用合并）。看看这个SO - 这是关于其他问题，但我觉得可以用作灵感

标签： angular angular-forms angular-reactive-forms

【解决方案1】：

无法查看顶级表单订阅中哪个字段发生了变化。

但是，您可以单独订阅表单控件，这样您就可以确切地知道哪个字段发生了变化：

Object.entries(this.formGroup.controls).forEach(value => {
  const [key, control] = value;
  control.valueChanges.subscribe(
    (value) => {
      console.log(key, value);
    },
  );
});

【讨论】：

"没有办法看到...", nop, "不可能什么都没有:) SO

【解决方案2】：

更好的选择是在表单控件中订阅 valuechange 而不是在 formGroup 上订阅，这样您就不需要检查字段。

this.formGroup.get('formControlName').valueChanges.subscribe(val => {
       console.log(value)
    });

如果您需要捕获 keychange 事件，您可以在模板中通过函数调用绑定 keyup 或 keydown 事件。

<input  type="text" (keyup)="handleKeyUpEvent($event)"/>

【讨论】：

【解决方案3】：

为了检测特定字段的值变化，可以订阅该字段的'valueChanges'事件，如下所示：

this.formGroup.controls['FieldName'].valueChanges.subscribe(change => {
        console.log(change);
});

【讨论】：