如何向反应式表单(Angular 2)添加撤消按钮? [英] How to add an undo button to a Reactive Form (Angular 2)?

问题描述

我使用 Angular 2 中可用的响应式表单技术构建了一个表单.该表单有许多不同类型的控件.现在我需要给它添加一个撤销按钮.我已经能够使用 click 和 change 事件设置一个基本的撤消按钮.当有人单击表单控件时，我将保存以前的值，并在控件的值更改时将该值存储到本地存储.然而，这种方法有一些缺点.例如，当有人 tabs 进入控件时，click 事件不会触发.

I have built a form using the Reactive Forms technique available in Angular 2. The form has many controls of different types. Now I need to add an undo button to it. I have been able to set up a basic undo button using the click and change events. I'm saving the previous value when someone clicks the form control and storing that value to Local Storage when the control's value is changed. However, this method has some drawbacks. For example, when someone tabs into the control, the click event would not fire.

那么有没有办法在发生变化时保存表单的版本?我认为理想的解决方案是 watcher，它将密切关注表单并保存它的版本.

So is there a way to save versions of the form when a change occurs? I think the ideal solution would be a watcher which will keep an eye on the form and save versions of it.

推荐答案

有点晚了，但请在此处查看此示例:

A bit late, but check this example here:

https://stackblitz.com/edit/reactive-form-changes-history

我使用表单组的valueChanges来推送数组中的更改，然后我可以恢复更改

I used valueChanges of the form group to push the changes in an Array, so then I can restore the changes

这篇关于如何向反应式表单(Angular 2)添加撤消按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！