Angular 4 更新后重置表单 - 保留 ngModel 值（使用 ngForm）

Question

我觉得这应该很简单，但是对于我的特定用例，我找不到任何东西（至少没有大量开销编码）。基本上我有一个不是模式的更新个人资料页面。用户更新后，我希望将表单重置回原始状态并使用当前值，以防用户想要进行更多编辑。

我正在使用 ngForm 的 reset()（也尝试过 resetForm()）。这会将其重置为原始状态等，但它也会删除输入中的所有值。在我使用[(ngModel)]="userRecord.phone" 等的每个输入上，我的userRecord 仍然正确。

有没有一种简单的方法可以在重置后保留或取回模型值？

onSubmit(event, profileForm: NgForm) {
  event.preventDefault();

  const myTempVar = this.userRecord;
  this.userRecord.put()
    .catch((e) => {
      this.isProcessing = false;
      return Observable.of(false);
    })
    .subscribe((response) => {
      this.displayConfirmation = 'Profile has been updated successfully.'
      this.isProcessing = false;
      this.userRecord = myTempVar;
    }, (err) => {
      console.log('There was an error saving', err);
      this.displayError = 'Unknown error.  Please refresh this page and try again.'
      this.isProcessing = false;
    });
}

如果它有助于可视化，这是提交前的原始屏幕：

提交后，如果我执行 ngForm reset()：

如果我不进行重置，就是这样。我希望它是这样的，除了原始并再次启用提交按钮（尽管现在我注意到如果我进行重置，无论如何都不会发生这种情况。:-(）。

Answer 1

在提交表单之前，您可以将表单数据克隆到某个 tmp 对象中：

tmpFormData: someType = Object.assign({}, currentData);

然后在你做reset()之后你可以做yourForm.patchValue(valuesFromtmpFormDateObject)

Answer 2

提交成功后执行此操作。

const myTempVar = this.userRecord;
this.form.reset();
this.userRecord = myTempVar;

这应该将值重新分配给模型。