NGXS <-> Angular: 2-Way binding

Question

I want to synchronize 2 form-fields which are populated by the ngxs-form-plugin.

If i change input-field#1, store gets synced, but input-field#2 still has old value. Same happens for input-field#2

Is there a ngxs-way using Reactive-Forms to keep them in sync?

Code-example: Stackblitz.com

Answer 1

The issue here is not about the ngxs but only reactive forms, when you have multiple components binded to the same FormControl , when a components value changes, the reactive form takes care of changing the model value but not the other components values.

To handle this case, the only hacky way a found is to listen to the form value changes, and set the same value making sure not to dispatch the event to avoid an infinit loop.

In the shared example you can add this to the AppComponent constructor :

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