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

Posted 2023-03-13

【中文标题】如何查看除特定控件之外的所有 FormControls ValueChanges？

【英文标题】：How to watch all FormControls ValueChanges except specific control?

【发布时间】：2018-10-06 18:38:34

【问题描述】：

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

这是我的form_group 的样子：

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

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

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

编写form_group.get('controlN').valueChanges 并在那里进行计算非常繁琐。我的表单中有 5 个或更多控件。

【参考方案1】：

您可以通过以下方式进行：

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

您也可以为当前任务调整过滤器

【参考方案2】：

这样，我想观察多个控件的变化，我能够这样做。

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

【参考方案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 中应用一些逻辑来排除您不想订阅的控件

【参考方案4】：

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

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

【讨论】：

同样的只是想想如何获得 control1 或另一个 control refrence，merage 是一样的，就像所有 observable 都有一个观察者一样，我认为问题还没有解决，我会如果我从 valueChange 中得到，就像这个控件有新的值一样，我有 50 项 formArray，祝你好运

现在如果您想观看 9 个控件，您需要 9 个参考，所以我仍然希望有更好的方法

@MuhammadAlbarmawi 它工作效率高，代码更少，而不是为每个控件声明订阅。是的，当然这与您的建议相同，区别在于简单。

也许您可以将所有要查看的表单控件放入一个新组或 FormArray 中，以便您更轻松地管理它们？

【参考方案5】：

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

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

【讨论】：

这很糟糕，我想避免这种情况，因为我的表单中有很多表单控件并且我正在寻求一种更简单的方法