Question

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

我正在使用ngForm的reset()（也尝试resetForm()）。这会将其重置为pristine等，但它也会删除输入中的所有值。在我正在使用[(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()：

如果我不进行重置，那就是这样。我希望它是这样的，除了pristine并再次启用提交按钮（虽然现在我注意到，如果我进行重置，不会发生这种情况。反正。:-(）。

Answer 1

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

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

然后在执行reset()后，您可以执行yourForm.patchValue(valuesFromtmpFormDateObject)

Answer 2

提交成功后执行此操作。

   function generate_page_links($cur_page, $num_pages) {
                    $page_links = '';

                    // If this page is not the first page, generate the "previous" link
                    if ($cur_page > 1) {
                        $page_links .= '<li><a href="' . $_SERVER['PHP_SELF'] . '?page=' . ($cur_page - 1) . '">&laquo;</a></li> ';
                    } else {
                        $page_links .= '<li  class="disabled"><a href="#" >&laquo; </a></li>';
                    }

                    // Loop through the pages generating the page number links
                    for ($i = 1; $i <= $num_pages; $i++) {
                        if ($cur_page == $i) {
                            $page_links .= '  <li class="active"><a href="#" >' . $i . '</a></li>';
                        } else {
                            $page_links .= ' <li><a href="' . $_SERVER['PHP_SELF'] . '?page=' . $i . '"> ' . $i . '</a></li>';
                        }
                    }

                    // If this page is not the last page, generate the "next" link
                    if ($cur_page < $num_pages) {
                        $page_links .= ' <li><a href="' . $_SERVER['PHP_SELF'] . '?page=' . ($cur_page + 1) . '">&raquo;</a></li>';
                    } else {
                        $page_links .= '<li  class="disabled"><a href="#" >&raquo;</a></li>';
                    }

                    return $page_links;
                }

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

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

2 个答案: