angular - NGXS <-> Angular: 2-Way 绑定

Question

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

如果我更改输入字段#1，存储会同步，但输入字段#2 仍然具有旧值。输入字段#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}));
}