Angular 2 将表单重置为初始数据，而无需单独设置每个表单控件

Question

我有一个 formGroup，我在编辑模式下打开它并使用正确的数据进行初始化。我还将这个初始数据保存在 editForm 中。

对其进行更改后，我想将所有更改重置为初始值，例如:

this.formGroup.reset(this.staffToEdit);

但是这只是将每个字段都留空。我发现的唯一解决方法是执行类似

this.formGroup.reset({field1 : this.editForm.field1});
...

问题是我需要一些更通用的东西，将所有字段重置为其初始值，而不必遍历每个 formControl。

这可以做到吗？

Answer 1

好吧，这是一个奇怪的交互，但我终于修复了它。

最初我在表单中有重置按钮:

   <form .. > 
   .....
    <div>
    <button id="resetButton"
            type="reset"
            class="btn btn-primary"
            (click)="resetFormData()"> Reset
    </button>
    </div>
    </form>

将按钮从表单中拉出后，我只是在 ngOnInit 之后保存初始值:

this._originalData = this.formGroup.value;

之后当我想重置时我使用

protected resetFormData() {
      this.formGroup.setValue(this._originalData);
  }

如果将按钮保留在表单中，则无法使用它来更新表单控件值!