Лучший способ подписаться на изменения истинного значения FormControl в Angular2 +? - PullRequest
Новая
       17

Лучший способ подписаться на изменения истинного значения FormControl в Angular2 +?

0 голосов
/ 21 февраля 2019

valueChanges Observable, который существует в объекте FormControl, выдает значение каждый раз, когда setValue(value) функция вызывается для объекта FormControl.

Используя оператор RxJS distinctUntilChanged, мы можем отфильтровать значения, которые не являются новыми.Но это не работает, если FormControl имеет начальное значение. 

const formGroup1 = new FormGroup({page: new FormControl(1)});
const formControl1 = formGroup1.get('page');
formControl1.valueChanges.pipe(distinctUntilChanged())
  .subscribe(v => console.log(`new formControl1 value: ${v}`));
formControl1.setValue(1);
formControl1.setValue(2);

это будет заноситься в журнал 

> new form1Control value: 1
> new form1Control value: 2

1 - это первое значение valueChanges Observable испускает, потому что значение formControl1 былоустанавливается до valueChanges Observable был создан.

distinctUntilChanged никогда не отфильтровывает первое излученное значение

Вот одно из решений этой проблемы: 

const formGroup2 = new FormGroup({page: new FormControl(1)});
const formControl2 = formGroup2.get('page');
formControl2.valueChanges.pipe(
    startWith(1),
    distinctUntilChanged(),
    skip(1)
).subscribe(v => console.log(`new formControl2 value: ${v}`));
formControl2.setValue(1);
formControl2.setValue(2);

Здесь я изменяю valueChanges Наблюдаемо с помощью генерации FormControlначальное значение, а затем пропустить его.Поэтому в первый раз, когда вызывается distinctUntilChanged, то есть строка:

formControl2.setValue(1)

, он уже будет иметь previousValue (1) для сравнения нового значения, поэтому функция внутри подписки не будетбыть казненным.

Но мне не очень нравится это решение.Есть ли встроенный или рекомендуемый способ справиться с изменениями значений FormControl в Angular7 и RxJS6?

stackblitz: https://stackblitz.com/edit/angular-arevmw?file=app%2Ficon-overview-example.ts

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Если я правильно понимаю вопрос, вы хотите, чтобы ваша наблюдаемая сработала только при любом изменении значения, кроме начального значения?

Вы пытались установить значение при создании элемента управления формы

new FormControl({ value: 1 });

или вы можете указать, что не хотите отправлять событие при установке значения

const formControl1 =new FormControl(1); formControl1.setValue(1, { emitEvent: false });

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

emitEvent: когда true или не указано (по умолчанию), и наблюдаемые состояния statusChanges и valueChanges генерируют события с самым последним состоянием и значением при обновлении значения элемента управления.При значении false события не генерируются.

Надеюсь, это поможет!

0 голосов
/ 21 февраля 2019

DifferentUntilChanged Начальное состояние всегда пусто.Но при выдаче первого значения отлично сохраняется до первого сохраненного значения.После этого выдается второе значение, оно сравнивает новое значение и сохраненное значение.Таким образом, ваше решение верное, или вы можете использовать skipWhile для сравнения первого значения.

...