Angular中Form Array更新对象字段后值无法保留问题求助

我明白你遇到的这个头疼的问题了——修改第二个产品数量时第一个产品的数量回退，而且用扩展运算符的方式根本没生效。核心原因是你直接操作了FormArray的value属性，但FormArray的状态是由内部的FormControl/FormGroup实例管理的，直接修改value不会同步到这些控件的状态，自然无法正确更新视图，甚至会导致旧值回显。

先看你代码里的两个关键问题： #

1. 直接修改formArray.value无效：this.productsinvoice.value是当前表单值的快照，不是可直接修改的数据源。不管是forEach修改value里的对象，还是map后重新赋值给value，都不会触发表单控件的状态更新，所以视图不会同步，下次获取value时还是会从控件实例里取旧值。
2. HTML里的value属性和formControlName冲突：你在数量输入框里写了value={{product_details_tax.value?.quantity}}，但formControlName='quantity'已经绑定了表单控件，手动设置value会干扰Angular的表单双向绑定，导致更新时出现值不一致的情况。

正确的解决方法 #

要修改FormArray里的控件值，必须通过Angular表单的API来操作对应的FormControl/FormGroup实例，而不是直接修改value。

方法1：通过FormArray的controls找到对应项并更新

假设你的productsinvoice是一个FormArray，你可以遍历它的controls（每个元素是FormGroup），找到匹配productID的项，然后用patchValue或者直接修改对应的FormControl：

// 按钮点击事件的正确代码
updateQuantity(productID: number, newQuantity: number) {
  // 明确类型为FormArray
  const formArray = this.productsinvoice as FormArray;
  // 遍历所有FormGroup项
  formArray.controls.forEach((group: FormGroup) => {
    if (group.get('productID')?.value === productID) {
      // 方法A：用patchValue更新指定字段
      group.patchValue({ quantity: newQuantity });
      // 方法B：直接定位到quantity控件设置值（更精准）
      // group.get('quantity')?.setValue(newQuantity);
    }
  });
}

方法2：用索引快速定位（如果模板中已拿到索引）

如果在模板的*ngFor里已经拿到了当前项的索引i，可以直接通过索引获取对应的FormGroup并更新，效率更高：

// 模板中传递索引、productID和新数量
// <button (click)="updateQuantityAt(i, product_details_tax.value.productID, product_quantity)">更新</button>
updateQuantityAt(index: number, productID: number, newQuantity: number) {
  const formGroup = this.productsinvoice.at(index) as FormGroup;
  if (formGroup.get('productID')?.value === productID) {
    formGroup.patchValue({ quantity: newQuantity });
  }
}

修正HTML代码 #

去掉数量输入框里的value={{product_details_tax.value?.quantity}}，因为formControlName='quantity'已经会自动绑定控件的值，手动设置value会导致冲突：

<div *ngFor="let product_details_tax of newrequest?.get('productsinvoice')['controls']; let i=index" [formGroupName]="i">
  <div class="row">
    <div class="form-group col formgroup_mar_bottom">
      <label for="inputRate4">Product Name</label>
      <input type="text" class="form-control" id="inputRate4" formControlName='productname' placeholder="Enter Product Name">
    </div>
    <div class="form-group col formgroup_mar_bottom">
      <label for="inputAmount">Quantity</label>
      <!-- 移除value属性，仅保留formControlName实现双向绑定 -->
      <input type="number" class="form-control" id="inputAmount4" formControlName='quantity' placeholder="Enter Quantity">
    </div>
    <!-- 添加更新按钮，传递必要参数 -->
    <div class="form-group col">
      <button class="btn btn-primary" (click)="updateQuantity(product_details_tax.value.productID, product_quantity)">更新数量</button>
    </div>
  </div>
</div>

为什么你的之前的方法无效？ #

• 对于forEach修改value：你修改的只是value快照里的对象，FormArray内部的FormControl实例并没有更新，所以当你再次操作表单时，视图会从FormControl里取旧值，导致第一个产品的数量回退。
• 对于map赋值给value：FormArray的value是一个getter属性，直接赋值给它不会触发控件的状态更新，所以新值不会同步到视图，控制台打印的value可能是你修改后的对象，但表单控件本身还是旧值。

这样修改后，你点击更新按钮时会直接修改对应的FormControl实例，表单状态和视图都会正确同步，不会出现值回退的问题了。

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