Angular 角度形式-从ValueChange中获取更改的内容

我正在使用Angular的反应式表单，并且正在实现撤销/重做功能

我想要的是将同一字段上的连续修改“打包”到一个撤销操作中。我认为为了实现这一点，我需要计算某种delta，可能需要使用一个diffing库（比如）

让我用一个例子来解释这一点：

• 用户将“name”字段更改为“Tom”
• 用户将“姓氏”字段选择为“Cat”
• 用户将“name”字段更改为“Jerry”，书写速度非常慢或多次退出并进入该字段
• 用户按下“撤消”

我希望撤销操作能够恢复“name”字段中的“Tom”值，而不需要传递“Jerr”、“Jer”等值

这是通过可观察的转换附加到form.valuechange才能完成的，还是有更适合此任务的替代方案

我没有任何代码可以共享，因为目前我正在研究如何实现该功能，所以请不要再说“让我们看看你得到了什么”的咒语；）

---

谢谢

您可以使用rxjs操作符debounce和pairswise实现，如

formControl=new FormControl('')

this.formControl.valueChanges.pipe(
    startWith(this.fromControl.value),
    debounceTime(500),
    pairwise())
    .subscribe(([old,value])=>{
      console.log(old,value)
    })

看

或者只使用去BounceTime

this.formControl.valueChanges.pipe(
        debounceTime(500),
        .subscribe((res)=>{
          this.myLog.push(res)
        })

---

我将使用命令模式执行此任务。使用“do”和“undo”方法将每个用户更改封装到命令对象中。然后你可以用这些命令构建一个堆栈，并根据自己的喜好撤销或重做一个操作。我认为使用状态是最好的选择。虽然此链接用于直接Redux，但我确信在NgRx中的实现几乎相同。IMHO将Redux用于简单的撤销任务有点过火，服务可以轻松完成这项工作，如果您希望使用state，只需使用Observable即可。可能的重复：Redux和类似的解决方案，IMHO，不适合与反应形式一起使用：两者（Redux和FormGroup）都被设计为“真理的单一来源”。所以我倾向于认为将命令放在表单子系统的顶部是一种具有大量冗余的反模式。我希望从表单生成与命令等价的命令，反之亦然。@Robert您链接的解决方案是“常用”的处理方式，它仅基于整个表单值，对数组添加和其他与simple

form.setValue

调用不兼容的操作不具有鲁棒性。而且它没有解决对同一个字段的多个更改：我想将它们合并到一个操作中，但这种简单的解决方案没有。谢谢。我在寻找一种只获取更改的方法，而不是获取所有表单值的方法。我想我必须通过一个diff库来处理表单值，以获得表单值中的确切变化。