时间戳

首页 > 解决方案 > 在 Angular 中正确实现“保存表单并关闭”按钮

angular - 在 Angular 中正确实现“保存表单并关闭”按钮

问题描述

我需要实现一个按钮，一旦单击，它将提交表单并返回历史记录的最后一页。回到最后一页很简单，我只需要这样做

this.location.back();

我的问题是执行 this.location.back() 时会触发 CanDeactivate。canDeactivate 方法目前只是检查表单是否脏，如果是，将显示“您有未保存的更改”对话框，您必须单击“离开”按钮才能返回上一页。这种行为会让客户感到困惑，尤其是在成功保存或提交表单的情况下。

我打算做的是.. 提交表单后，我将模型或表单的 isDirty 属性设置为 false 或将表单标记为原始或重置表单，无论哪一个可能（我刚开始在角度编码所以请耐心等待我（哈哈），这样当 canDeactivate 被触发时，它将不再看到表单是脏的，因此不会显示“未保存的更改”对话框。

我还没有开始在这部分编码，但我想知道这听起来是否是一种可以接受且可行的方式来实现这种功能。

谢谢！

标签： angular

解决方案

提交表单后，只需检查它是否已成功发布，然后重新设置表单并使用位置

this.myAPI.post(this.myForm.value).subscribe(res=>{
  
    console.log(res)
    this.myForm.reset()
    this.location.back()  
})

推荐阅读