NGXS <-> Angular: 2-Way 绑定

Question

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

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

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

代码示例：Stackblitz.com

Answer 1

这里的问题不在于 ngxs，而只是响应式表单，当您将多个组件绑定到同一个 FormControl 时，当组件值更改时，响应式表单负责更改模型值而不是其他组件价值观。

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

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

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