Angular Reactive Form字段联动修改后提交衍生字段值为空如何解决

问题根因 #

你使用Angular响应式表单开发时，联动计算noOfParticipants的逻辑只更新了组件类的普通属性，没有同步给FormGroup中对应的表单控件赋值。表单提交时读取的是FormGroup内部存储的状态值，该值始终是初始化时的null，因此会出现提交时字段为空的问题。

修复方案 #

修改两个联动事件的处理函数，计算完成后主动更新表单控件的值即可：

1. 修改组件类的事件处理方法 #

onChangeGameTemplate(event){
  this.seatingCapacity = this.seatMapping[event];
  // 增加空值判断避免生成NaN
  if(this.seatingCapacity){
    this.noOfParticipants = Math.pow(this.seatingCapacity,this.noOfRounds);
    // 关键：同步更新表单控件的值
    this.tournamentTypeForm.get('noOfParticipants').setValue(this.noOfParticipants);
  }
}

onChangeNoOfRounds(event){
  if(this.seatingCapacity){
    this.noOfParticipants = Math.pow(this.seatingCapacity,event);
    // 关键：同步更新表单控件的值
    this.tournamentTypeForm.get('noOfParticipants').setValue(this.noOfParticipants);
  }
}

2. 优化模板代码（可选但推荐） #

响应式表单通过formControlName已经可以自动同步控件值，无需额外绑定[value]，可以删除冗余绑定避免冲突：

<!-- 参赛人数字段去掉[value]绑定 -->
<input type="number" name="noOfParticipants" readonly="true"
  class="form-control" formControlName="noOfParticipants" />

<!-- 轮数字段也可以去掉[value]绑定，同时修改表单初始化逻辑给默认值 -->
<input type="number" name="noOfRounds"
  (change)="onChangeNoOfRounds($event.target.value)"
  class="form-control" formControlName="noOfRounds" />

对应的表单初始化时给noOfRounds设置默认值：

this.tournamentTypeForm = this.formBuilder.group({
  // 其他字段保持不变
  noOfRounds: [1, Validators.required], // 初始值设为1，替代原来的普通属性默认值
  noOfParticipants: [null, Validators.required]
});

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