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

Question

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

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

this.formGroup.reset(this.staffToEdit);

但这一切所做的只是在每个字段中留空。我发现的唯一解决方法是做类似

的事情

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

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

这可以吗？

Answer 1

我所做的是保持对初始值的引用，并仅使用 patchValue() 调用和 markAsPristine() 将所有表单值设置回它们最初的值，并标记整个保持原始状态。

const initialFormValues {
  firstname: 'Joe',
  surname: 'Doe'
};

...

reset() {
  this.formGroup.patchValue(initialFormValues);
  this.formGroup.markAsPristine();
}

或者我猜你的情况是这样的：

reset() {
  this.formGroup.patchValue(this.editForm.value);
  this.formGroup.markAsPristine();
}

Answer 2

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

最初我在表单中设置了重置按钮：

   <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);
  }

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

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

Angular 2 reset form to initial data without having to set each formcontrol individually

angular2-forms

angular