NGXS <-> Angular: 2-Way 绑定

Posted 2023-03-16

【中文标题】NGXS <-> Angular: 2-Way 绑定

【英文标题】：NGXS <-> Angular: 2-Way binding

【发布时间】：2019-04-03 14:06:10

【问题描述】：

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

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

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

代码示例：Stackblitz.com

【参考方案1】：

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

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

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

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

【讨论】：

这行得通。这不是我期待的干净方式，但我应该没问题。非常感谢。