如何在响应式表单中追踪未保存更改，实现保存前的按钮操作拦截？

首先解决核心bug：提交后表单持续处于dirty状态 #

你原来写的if (this.exampleForm.dirty) 判断逻辑本身没有问题，出现拦截一直触发的根本原因是：Angular 响应式表单的dirty状态需要手动维护，框架不会在你调用提交接口成功后自动帮你重置。
表单默认的dirty标记只会记录“当前表单值和表单初始加载时的值是否存在差异”，这个标记的触发时机和接口提交成功没有任何关联——哪怕你已经把数据成功存到服务端，只要没有主动清除这个标记，拦截逻辑就会一直拿到旧的状态值，触发拦截分支。

正确的提交后状态处理逻辑，要根据场景选择对应方法：

• 如果提交完成后需要保留当前表单的填充值，只清除未保存标记：在接口成功的回调里调用this.exampleForm.markAsPristine()，这个方法只会把表单的脏状态标记清掉，不会改动表单当前显示的内容，也不会影响用户后续的输入操作
• 如果提交完成后需要把表单重置为空、回到初始加载状态：在接口成功回调里调用this.exampleForm.reset(this.initialFormValue)，这个方法会同时把表单的dirty、touched等所有状态重置为初始值
  注意：千万别在提交成功后调用无参数的reset()，这会直接把用户刚填写的内容全部清空，造成体验问题。

实现两个核心需求的最佳实践 #

1. 精准追踪未保存的变更 #

不要完全依赖框架自带的dirty判断，框架自带的标记很容易被意外的赋值操作误触发（比如程序主动给控件赋值、回填历史数据时），可以搭配快照对比的逻辑做双重校验：

• 表单初始化完成、服务端数据回填完毕后，立刻把当前表单的完整值存一份静态快照，比如this.savedFormSnapshot = this.exampleForm.getRawValue()
• 封装统一的未保存状态判断方法，做双重校验：
  • 第一重校验：检查表单当前dirty值是否为true
  • 第二重校验：对比当前this.exampleForm.getRawValue()和之前存的savedFormSnapshot是否完全一致
• 每次提交成功后，同步更新两个内容：
  • 调用markAsPristine()清除表单的脏标记
  • 把savedFormSnapshot更新为当前最新的表单值，作为下一次未保存判断的基准

2. 未保存状态下拦截同页其他功能按钮的点击 #

不要在每个按钮的点击逻辑里重复写相同的if判断，这种重复代码后续维护成本极高，可以做统一的拦截逻辑：

• 给同页所有需要拦截的功能按钮统一加上标记（比如自定义属性intercept-dirty），提前把保存、放弃修改这两个本身用于处理未保存状态的按钮排除在拦截范围外
• 全局监听页面的点击事件，只要触发点击的元素命中拦截标记，就先执行未保存状态校验：
  • 如果存在未保存变更，直接终止后续的按钮逻辑，弹出提示告知用户需要先处理未保存的内容
  • 如果没有未保存变更，就正常执行按钮原本的业务逻辑
• 可以把这套校验逻辑复用在其他需要拦截的场景：比如路由跳转拦截、浏览器页面关闭/刷新的拦截，避免重复写判断逻辑

常见踩坑提醒 #

• 做表单回填的时候，一定要给patchValue()/setValue()加上{ emitEvent: false }参数，避免回填服务端数据的时候意外把表单标记为dirty
• 拦截逻辑里不要误拦核心操作按钮，否则用户遇到未保存提示后，连保存按钮都点不了，就会出现操作死循环
• 不要把提交请求的loading状态和未保存状态混为一谈，请求过程中就算用户没改内容，也要等请求成功回调执行完，再清除未保存标记，避免接口失败的时候用户误以为已经存好了

内容的提问来源于stack exchange，提问作者angular_code