angular - 如何识别 FormArray 中的哪个项目发出了 valueChanges 事件？

Question

在 Angular 中，有没有一种方法可以识别 dynamic 中的 FormGroup/FormControl FormArray 发出了 valueChanges 事件？

我的 FormArray 是动态的。它一开始是空的，用户可以通过单击按钮将 FormGroup 添加到 FormArray。

当valueChanges时，我需要重新验证控件。因为我不知道哪个控件发出了事件，所以我循环遍历整个 FormArray 并验证所有 FormGroup/FormControl，即使只有一个控件发生变化 -这是每次数组中的任何内容发生变化时。我怎样才能避免这样做？

        this.myFormArray
        .valueChanges
        .subscribe(data => this.onValueChanged(data));

    onValueChanged(data?: any): void {

    // the data I receive is an entire form array.
    // how can I tell which particular item emitted the event, 
    // so I don’t need to loop through entire array and run validation for all items.

    for (let control in this.myFormArray.controls) {
        // run validation on each control.
    }
}

Answer 1

以 epsilon 的答案为基础，收集一组 valueChanges 可观察值并将它们合并 - 您还可以通过管道传输值更改，这将通过映射将必要的上下文添加到更改流。

merge(...this.formArray.controls.map((control: AbstractControl, index: number) =>
        control.valueChanges.pipe(map(value => ({ rowIndex: index, value })))))
      .subscribe(changes => {
        console.log(changes);
      });

输出:

{ 
  rowIndex: 0
  value: {
    <current value of the changed object>
  }
}

请注意，第一次调用映射(在控件上)是在一个数组上。第二个映射(在管道中)是一个 RxJs 映射。我真的很喜欢这个网站来帮助这些运算符(operator)弄清楚并想象这些事件流是什么样子的:https://rxmarbles.com/#map (编辑:我现在认为这篇文章要好得多:https://indepth.dev/learn-to-combine-rxjs-sequences-with-super-intuitive-interactive-diagrams/)

编辑:因为我正在观察用户可以通过添加/删除按钮修改的 FormArray，所以我添加了一个 changesUnsubscribe 主题并在 takeUntil 中引用它。这允许我在列表更改时丢弃旧的 watch 并设置新的 watch 。所以现在我在列表中添加或删除项目时调用 watchForChanges()。

changesUnsubscribe = new Subject();
...
watchForChanges() {
  // cleanup any prior subscriptions before re-establishing new ones
  this.changesUnsubscribe.next();

  merge(...this.formArray.controls.map((control: AbstractControl, index: number) =>
            control.valueChanges.pipe(
                takeUntil(this.changesUnsubscribe),
                map(value => ({ rowIndex: index, control: control, data: value })))
    )).subscribe(changes => {
            this.onValueChanged(changes);
    });
}