Angular 2 Reactive Forms 仅从更改的控件中获取值答案

【问题标题】：Angular 2 Reactive Forms only get the value from the changed controlAngular 2 Reactive Forms 仅从更改的控件中获取值
【发布时间】：2018-08-24 02:13:28
【问题描述】：

我有一个包含所有输入的动态创建的表单。我正在订阅更改，但是当控件更改时，我会从所有控件中获取值，所以我真的不知道哪个控件被更改了。是否可以通过 valueChanges 函数仅从更改的控件中获取更改的值？

表单很大，所以不能为每个控件订阅 valueChanges。

函数目前看起来是这样的：

checkForValueChanges() {
    this.metadataForm.valueChanges.subscribe(controls => {
        // how to get the changed control form name here ?
    });
}

由于项目实在是太大了，我只是做了一个简单的例子来说明我的问题： StackBlitz example 您可以在控制台中看到我得到的结果是所有控件，而不仅仅是更改的那个。

【问题讨论】：

你能在 StackBlitz 上做一个例子吗？
恐怕唯一的方法是将 oldvalues 保存在一个变量中并比较两个对象，（oldValues 和 values - 您在订阅时收到的数据）： valueChanges.subscribe(values=>{比较（旧值，值}）
我是这么认为的，但我真的希望有更好的解决方案，因为我必须根据更改的控件更新一些局部变量。

标签： angular angular-reactive-forms

【解决方案1】：

我能想象的最简洁的方式是动态订阅所有表单控件：

const subscriptions = [];
for (const key of Object.keys(this.metadataForm.controls)) {

    const subscription = this.metadataForm.controls[key].valueChanges
    .subscribe(value => console.log('value :' + value[key] + ' and key : ' + key));

    subscriptions.push(subscription);
}

我添加了一个订阅数组来处理销毁时的取消订阅。

【讨论】：

感谢您抽出宝贵的时间。但是，由于表单有大量字段，所有输入（表单是要编辑一些非常大的元数据），我认为我的性能会有相当大的下降。该组件应该很轻，因为它是更大模块的一部分，该模块已经有很多组件在做其他艰苦的工作。如果仅使用表单控件订阅是不可能的，我会找到另一种方式来完成我的操作。

【解决方案2】：

this.imagSub = this.imagingForm.valueChanges.pipe(
    pairwise(),
    map(([oldState, newState]) => {
      let changes = {};
      for (const key in newState) {
        if (oldState[key] !== newState[key] && 
            oldState[key] !== undefined) {
          changes[key] = newState[key];
        }
      }
      return changes;
    }),
    filter(changes => Object.keys(changes).length !== 0 && !this.imagingForm.invalid)
  ).subscribe(
    value => {
      console.log("Form has changed:", value);
    }
  );

该订阅在 ngOnInit 上激活并从 API 下载一些数据（然后将它们放入表单字段中，所以我不需要第一个值 [and value == undefined]，因为她自己设置字段）

对我来说，该解决方案效果很好。但是我想如果你有一个“有大量字段”的表单，这种方法会比保存订阅更糟糕。

【讨论】：