Angular/Firestore 保存文档后如何正确将响应式表单标记为pristine状态

问题根因 #

• 服务层的saveForm方法未返回Firestore set操作的Promise实例，async函数无显式返回值时会默认返回立即resolve的空Promise，因此await this.service.saveForm()不会等待实际的存储请求完成，后续标记pristine的逻辑会直接执行，和存储操作结果无关。
• 服务代码存在参数名不匹配的笔误：入参声明为value，实际调用set时使用了未定义的formValue。

代码修改 #

1. 服务层调整 #

返回set操作的异步结果，同时修正参数笔误：

public async saveForm(value: Form) {
  return this.afs.doc<Form>(`path`).set(value, {merge: true })
}

2. 组件层调整 #

新增异常捕获逻辑，仅在存储请求成功时才标记表单为pristine状态：

async saveForm(){
  try {
    await this.service.saveForm(this.form.value);
    this.form.markAsPristine();
    // 可在此处补充保存成功的提示逻辑
  } catch (error) {
    // 可在此处补充保存失败的报错、重试逻辑
    console.error('表单保存失败：', error);
  }
}

修改后只有存储接口返回成功无异常时，才会执行表单状态标记的逻辑，符合需求。

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