Как посмотреть все FormControls ValueChanges, кроме конкретного элемента управления?

Question

У меня есть форма, которая выполняет вычисления всякий раз, когда изменяется управляющее входное значение.

Вот мой form_group выглядит так:

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

Я могу обнаружить все изменения значения элемента управления с помощьюform_group.valueChanges наблюдаем и делаем вычисления.Однако я хочу исключить некоторые элементы управления, которым не нужно выполнять такое действие.

Но в любом случае, как не обнаружить изменения в конкретном элементе управления?

Очень обременительно писать form_group.get('controlN').valueChanges и делать там вычисления.У меня есть 5 или более элементов управления в моей форме.

Answer 1

Поскольку 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 Пример

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

Затем вы можете применить некоторую логику для каждого, чтобы исключить элементы управления, на которые вы не хотите подписываться

Answer 4

Вам просто нужно получить доступ к элементу управления и подписаться на свойство изменения значения, как это

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