Angular表单提交偶现所有值为0问题求助

我从12个输入框收集数值，提交表单时约1/10概率出现所有值为0的情况，其余时候正常运行。怀疑是提交函数在数据收集完成前就执行了，但未找到代码错误，求协助排查。

组件代码（.ts） #

async onSubmit() {
  this.getData();
  this.aioServ.submitForm(this.data)
}

getData() {
  this.data = {
    month: (document.getElementById("month") as HTMLInputElement).value,
    year: (document.getElementById("year") as HTMLInputElement).value,
    a1: +(document.getElementById("a1") as HTMLInputElement).value,
    b1: +(document.getElementById("b1") as HTMLInputElement).value,
    a2: +(document.getElementById("a2") as HTMLInputElement).value,
    b2: +(document.getElementById("b2") as HTMLInputElement).value,
    a3: +(document.getElementById("a3") as HTMLInputElement).value,
    b3: Math.trunc(+((3 / 100) * this.sc[0]?.population)),
    a4: +(document.getElementById("a4") as HTMLInputElement).value,
    a5: +(document.getElementById("a5") as HTMLInputElement).value,
    b5: +this.sc[0]?.thirtyPlus,
    a6: +(document.getElementById("a6") as HTMLInputElement).value,
    b6: +this.sc[0]?.thirtyPlus,
    a7: +(document.getElementById("a7") as HTMLInputElement).value,
    b7: +this.sc[0]?.thirtyPlus,
    a8: +(document.getElementById("a8") as HTMLInputElement).value,
    a9: +(document.getElementById("a9") as HTMLInputElement).value,
    a10: +(document.getElementById("a10") as HTMLInputElement).value,
    b10: +(document.getElementById("b10") as HTMLInputElement).value,
    a11: +(document.getElementById("a11") as HTMLInputElement).value,
    b11: +(document.getElementById("b11") as HTMLInputElement).value,
    a12: +(document.getElementById("a12") as HTMLInputElement).value,
    b12: +(document.getElementById("b12") as HTMLInputElement).value,
  };
  console.log("Get Data: ", this.data);
}

服务代码（aioService.ts） #

submitForm(data) {
  this.afs.firestore.collection('reports').doc(`${calculation.documentName}`).get().then(async docSnapshot => {
    if(docSnapshot.exists) {
      const alert = await this.alertCtrl.create({
        header: 'Error',
        message: 'Report already submitted for the selected month!',
        buttons: ['Dismiss']
      });
      await alert.present();
    }
    else {
      this.reportsCollection.doc(`${calculation.documentName}`).set(calculation);
    }
  })
}

目前尚未尝试其他解决方法，不清楚问题根源。

问题根源与修复方案 #

1. 核心错误：服务端提交参数不匹配 #

服务的submitForm方法接收了data参数，但实际提交的却是未定义的外部calculation变量。如果calculation未正确初始化，就会导致提交全0或空值数据。

修复：
将服务内的calculation替换为传入的data参数，并确保文档名称从data中正确生成：

submitForm(data) {
  const docName = `${data.year}-${data.month}`; // 按实际业务逻辑生成文档名
  this.afs.firestore.collection('reports').doc(docName).get().then(async docSnapshot => {
    if(docSnapshot.exists) {
      const alert = await this.alertCtrl.create({
        header: 'Error',
        message: 'Report already submitted for the selected month!',
        buttons: ['Dismiss']
      });
      await alert.present();
    }
    else {
      this.reportsCollection.doc(docName).set(data); // 提交收集到的表单数据
    }
  })
}

2. 潜在风险：异步数据未就绪 #

如果this.sc是从后端异步加载的数据，可能存在onSubmit执行时this.sc[0]尚未初始化的情况，此时+this.sc[0]?.population会转为NaN，最终被解析为0。

修复：
在提交前检查异步数据是否就绪：

async onSubmit() {
  if(!this.sc?.[0]) {
    const alert = await this.alertCtrl.create({
      header: '提示',
      message: '数据加载中，请稍后再提交',
      buttons: ['Dismiss']
    });
    await alert.present();
    return;
  }
  this.getData();
  this.aioServ.submitForm(this.data);
}

3. 优化建议：避免直接操作DOM #

在Angular中推荐使用双向绑定（[(ngModel)]）或响应式表单替代getElementById，避免偶发的DOM元素获取失败：

<!-- 示例：用ngModel绑定输入框 -->
<input type="number" [(ngModel)]="data.month" />
<input type="number" [(ngModel)]="data.a1" />

修改后无需手动调用getData收集数据，onSubmit可直接提交实时同步的this.data：

async onSubmit() {
  if(!this.sc?.[0]) {
    // 提示逻辑
    return;
  }
  // 计算动态字段
  this.data.b3 = Math.trunc((3 / 100) * this.sc[0].population);
  this.data.b5 = this.sc[0].thirtyPlus;
  this.data.b6 = this.sc[0].thirtyPlus;
  this.data.b7 = this.sc[0].thirtyPlus;
  this.aioServ.submitForm(this.data);
}

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