NGXS <-> Angular：2 向绑定

Question

我想同步 2 个由 ngxs-form-plugin 填充的表单字段。

如果我更改输入字段#1，存储会同步，但输入字段#2 仍然具有旧值。 input-field#2

也一样

是否有使用 Reactive-Forms 使它们保持同步的 ngxs 方式？

代码示例：Stackblitz.com

Answer 1

这里的问题与 ngxs 无关，而仅与反应形式有关，当您将多个组件绑定到同一个 FormControl 时，当组件值发生变化时，反应形式会负责更改模型值，但是不是其他组件值。

为了处理这种情况，发现的唯一 hacky 方法是监听表单值的变化，并设置相同的值确保不分派事件以避免无限循环。

在共享示例中，您可以将其添加到 AppComponent constructor :

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

NGXS <-> Angular：2 向绑定

NGXS <-> Angular: 2-Way binding

store

typescript

angular

ngxs