Question

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

这是我的form_group看起来像：

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

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

但是无论如何都没有检测到特定控件的更改？

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

Answer 1

您可以将各个valueChanges Observable合并为一个，如下所示：

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

Answer 2

您是否有理由无法创建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中应用一些逻辑来排除您不想订阅的控件

Answer 3

你可以这样做：

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

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

Answer 4

您只需要访问控件并订阅值更改属性，如此

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

Answer 5

由于Angular以递归方式为所有父控件发出更改，因此可以编写如下内容：

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

let control3Changed = false

this.form.valueChanges
  .subscribe(() => {
    if (control3Changed) {
      control3Changed = false;
      return;
    }
    console.log('ValueChanges except control3');
  });

this.form.get('control3').valueChanges
  .subscribe(() => control3Changed = true);

当然，不要忘记取消订阅ngOnDestroy或takeUntil

<强> Ng-run Example

Answer 6

就像这样，我想观察多个控件的变化，我能够做到这一点。

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

除特定控件外，如何观看所有FormControls ValueChanges？

6 个答案: