Angular：如何在FormArray中避免使用ngModel

问题原因 #

在响应式表单里同时用formControlName和ngModel会打乱表单的数据流逻辑，尤其是动态新增FormArray行时，ngModel的绑定上下文会出现混乱，导致输入值串到下一行的异常。

解决办法 #

完全用响应式表单API处理计算与值更新，步骤如下：

1. 修正单行计算逻辑 #

你原来的Calculate()是计算所有行的总和，但每个行的QtyReceived应该是当前行的QtyDelivered减QtyRejected，先写一个针对单行的计算方法：

calculateRowTotal(group: FormGroup): number {
  const delivered = Number(group.get('QtyDelivered').value) || 0;
  const rejected = Number(group.get('QtyRejected').value) || 0;
  return delivered - rejected;
}

2. 监听输入变化自动更新QtyReceived #

创建行表单组时，监听QtyDelivered和QtyRejected的变化，自动计算并更新QtyReceived的值：

createList(): FormGroup {
  const group = this.formBuilder.group({
    id: [0],
    QtyOrder: ['0', Validators.required],
    QtyDelivered: [''],
    QtyRejected: ['', Validators.required],
    QtyReceived: ['', Validators.required],
  });

  // 监听两个输入框的变化，触发结果更新
  group.get('QtyDelivered').valueChanges.subscribe(() => {
    this.updateRowReceived(group);
  });
  group.get('QtyRejected').valueChanges.subscribe(() => {
    this.updateRowReceived(group);
  });

  // 行创建时先计算一次初始值
  this.updateRowReceived(group);

  return group;
}

// 更新当前行的QtyReceived值
updateRowReceived(group: FormGroup): void {
  const total = this.calculateRowTotal(group);
  // emitEvent设为false，避免触发不必要的valueChanges循环
  group.get('QtyReceived').setValue(total.toString(), { emitEvent: false });
}

3. 修改HTML模板，移除ngModel #

直接用formControlName绑定即可，值会通过响应式API自动更新，不需要ngModel：

<!-- 外层需包裹formGroupName，对应FormArray的索引 -->
<div *ngFor="let item of array.controls; let i = index" [formGroupName]="i">
  <input type="text" formControlName="QtyOrder">
  <input type="text" formControlName="QtyDelivered">
  <input type="text" formControlName="QtyRejected">
  <!-- 移除ngModel，直接绑定formControlName，值会自动填充 -->
  <input type="text" formControlName="QtyReceived" readonly>
</div>

4. （可选）计算所有行的总和 #

如果需要统计整个FormArray的QtyReceived总和，可以保留类似原逻辑的方法，注意处理空值：

calculateTotalReceived(): number {
  return this.array.controls.reduce((sum, group) => {
    const received = Number(group.get('QtyReceived').value) || 0;
    return sum + received;
  }, 0);
}

关键说明 #

• 响应式表单要通过setValue()/patchValue()更新控件值，避免和ngModel混用，防止上下文混乱
• 用valueChanges监听输入变化实现自动计算，保证数据一致性
• 每一行表单组都独立绑定监听事件，新增行时不会出现值串行问题

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