如何查看除特定控件外的所有 FormControls ValueChanges？

Question

我有一个表格，只要控件输入值发生变化，它就会进行计算。

这是我的 form_group 样子：

form_group = this.fb.group({
    control1: [],
    control2: [],
    control3: [],
    ...
    control10: [],
});

我可以通过 form_group.valueChanges observable 检测所有控件值的变化，并进行计算。但是我想排除一些不需要执行此类操作的控件。

但是无论如何如何不检测特定控件上的更改？

写一个form_group.get('controlN').valueChanges然后在那里做一个计算很麻烦。我的表单中有 5 个或更多控件。

Answer 1

您只需要像这样访问控件并订阅值更改属性

    this.form_group.get('control1').valueChanges.subscribe(value => {
        console.log(value)
    })

Answer 2

您可以像这样将单个 valueChanges Observables 合并为一个：

Observable.merge(
    [ control1.valueChanges,
      control2.valueChanges ]
  ).subscribe(() => {
    // do your computation
  });

Answer 3

有什么原因导致您不能创建一个 FormArray 而不是多个表单控件？例如

form_group = this.fb.group({
    'controls': this.fb.array([...])
});

然后你可以在你的组件中定义一个属性

get controls(): FormArray {
    return <FormArray>this.form_group.get('control');
}

然后您可以从这里迭代表单数组并订阅 valueChanges

this.controls.controls.forEach(control => {
    control.valueChanges.subscribe(...)
});

然后您可以在 for each 中应用一些逻辑来排除您不想订阅的控件

Answer 4

像这样，我想观察多个控件的变化，我可以这样做。

import { merge } from 'rxjs';
...
const merged = merge(this.control1.valueChanges,this.control2.valueChanges, this.control3.valueChanges, this.control4.valueChanges);

merged.subscribe(x => console.log(x));

参考：- https://rxjs-dev.firebaseapp.com/api/index/function/merge

Answer 5

您可以按照以下方式进行：

combineLatest(this.getControlsForWatch()).subscribe(() => applyFilter());

getControlsForWatch(): Array<Observable<any>> {
        return (
            Object.entries(this.from.controls)
                .filter(([key]) => key !== 'exceptedControl')
                .map(([key]) => this.from.controls[key].valueChanges)
        );
    }

您还可以针对当前任务调整过滤器

如何查看除特定控件外的所有 FormControls ValueChanges？

How to watch all FormControls ValueChanges except specific control?

typescript

angular

angular-reactive-forms