Question

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

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

this.formGroup.reset(this.staffToEdit);

但所有这一切在每个领域都是空白的。我找到的唯一解决方法是执行类似

的操作

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

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

这可能吗？

Answer 1

好的，这是一个奇怪的互动，但我终于解决了。

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

Route::group(['middleware' => ['auth'], 'namespace' => 'admin', 'prefix' => 'admin'], function() { 
  // admin routes 
  Route::get ('/', ['uses' => 'AdminController@index', 'before' => 'admin']); 
});

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

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

之后我想重置时使用

this._originalData = this.formGroup.value;

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

Answer 2

我所做的是保留对初始值的引用，只需使用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();
}

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

2 个答案: