编辑模式下如何检测预填充Angular Reactive Form的用户变更

方案1：赋值时禁用事件发射（最简便） #

Angular 表单的 setValue、patchValue、reset 方法均支持额外的配置项，传入 { emitEvent: false } 即可让本次赋值操作不触发 valueChanges 事件，适合预赋值逻辑统一可控的场景。
示例代码：

// 预填充表单数据
this.editForm.patchValue({
  title: savedDraft.title,
  content: savedDraft.content
}, { emitEvent: false });

方案2：新增预加载标志位（兼容复杂赋值场景） #

如果存在多段预赋值逻辑、或者第三方组件自动赋值无法统一加emitEvent配置，可以通过全局标志位区分预加载阶段和用户交互阶段：

• 表单初始化后先将标志位isPreloading设为true
• 所有预填充操作全部完成后，再将isPreloading修改为false
• valueChanges订阅回调中先判断标志位，仅当标志位为false时执行业务逻辑
  示例代码：

private isPreloading = true;

ngOnInit(): void {
  // 初始化表单
  this.editForm = this.fb.group({
    title: ['', Validators.required],
    content: ['', Validators.required]
  });

  // 订阅表单变更
  this.editForm.valueChanges.subscribe(formVal => {
    if (this.isPreloading) return;
    // 此处编写用户主动修改后需要执行的逻辑
    this.autoSaveDraft(formVal);
  });

  // 拉取已提交的表单数据完成预填充
  this.draftService.getSavedDraft(this.draftId).subscribe(draft => {
    this.editForm.patchValue(draft);
    // 所有预填充操作完成，修改标志位
    this.isPreloading = false;
  });
}

方案3：通过表单dirty属性判断（适合无需区分预赋值阶段的场景） #

表单的dirty属性仅会在用户主动和控件交互修改值时变为true，代码预赋值不会修改该属性的状态，可以直接在订阅回调中判断该属性过滤预赋值触发的事件：
示例代码：

this.editForm.valueChanges.subscribe(formVal => {
  if (this.editForm.dirty) {
    // 仅用户主动修改表单时执行逻辑
    this.autoSaveDraft(formVal);
  }
});

如果后续有重置表单的需求，调用this.editForm.markAsPristine()即可将dirty属性重置为false。

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