NGXS <-> Угловой: двухсторонняя привязка

Question

Я хочу синхронизировать 2 поля формы, которые заполняются плагином ngxs-form-plugin.

Если я изменяю поле ввода № 1, хранилище синхронизируется, но поле ввода № 2 все еще имеет старое значение. То же самое происходит для поля ввода # 2

Существует ли способ ngxs, использующий Reactive-Forms для их синхронизации?

Пример кода: Stackblitz.com

Answer 1

Проблема здесь не в ngxs, а только в реактивных формах, когда у вас есть несколько компонентов, связанных с одним и тем же FormControl, когда значение компонента изменяется, реактивная форма заботится об изменении значения модели, но не других компонентов значения.

Чтобы справиться с этим случаем, единственный найденный хакерский способ - это прослушать изменения значения формы и установить то же значение, избегая отправки события, чтобы избежать бесконечного цикла.

В общем примере вы можете добавить это к AppComponent constructor:

constructor(private fb: FormBuilder, private store: Store) {
    this.nameForm.valueChanges
     .subscribe(_ =>
      this.nameForm.setValue(_, { emitEvent: false}));
}