Question

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

表单非常大，因此将每个控件都订阅到valueChanges不是一种选择。

该功能目前如下所示：

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

由于项目非常大，我只是举了一个简单的例子来说明我的问题： StackBlitz example 你可以在控制台中看到我得到的结果是所有的控件，而不仅仅是它改变的控件。

Answer 1

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下载了一些数据（之后将它们放入表单字段，因此我不需要第一个值[和value == undefined]，因为她自己设置了表单设置字段）

对我来说，该解决方案效果很好。但是我想，如果您的表单具有“具有大量字段”的表单，那么此方法将比保存订阅更为糟糕。

Answer 2

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

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);
}

我添加了一个订阅数组来处理destroy上的取消订阅。

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

2 个答案: