Angular中valueChanges值显示正常但提交时theoreticalStock字段为空无法保存

问题根源 #

你混用了Angular响应式表单的formControlName绑定和原生[value]属性绑定：响应式表单的控件值完全由TS层的FormControl实例管理，你直接修改输入框的value属性只会更新视图展示，不会同步到FormControl的存储值里，所以提交表单时取到的还是初始化时的空值。

修复方案 #

1. 调整TS逻辑，直接更新FormControl值 #

删除原来的selectedMedTheoreticalStock变量赋值逻辑，改为直接调用表单控件的setValue方法更新值，也可以优化为只监听药品字段的变更，减少不必要的触发：

initForm() {
  this.addDrugAuditForm = this.formBuilder.group({
    serviceUserId: this.serviceUserId,
    medication: ['', Validators.required],
    theoreticalStock: ['', Validators.required],
    actualStock: ['', Validators.required],
    error: new FormControl(),
    reportedDate: [ this.today, Validators.required]
  });

  // 只监听药品字段变更，不需要监听整个表单
  this.addDrugAuditForm.get('medication')?.valueChanges.subscribe(medId => {
    this.selectedMedicationToAudit = this.serviceUsersMedication.find(item => item.id === medId);
    if (this.selectedMedicationToAudit) {
      const stock = fetchStockForMedication(this.selectedMedicationToAudit, this.stockDictionary);
      // 直接更新表单控件的值，会自动同步到视图
      this.addDrugAuditForm.get('theoreticalStock')?.setValue(stock.quantity || 0);
    }
  });
}

2. 调整HTML模板，移除冗余的value绑定 #

删掉[value]属性，响应式表单会自动把FormControl的值同步到输入框：

<div class="col-md-4 mb-3">
  <label>Theoretical Stock*</label>
  <input id="theoreticalStock"
         type="text"
         formControlName="theoreticalStock"
         class="form-control"
         >
</div>

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