如何在Angular循环的FormControl输入框中设置独立默认值？

问题根源在于你用单个FormControl绑定了所有循环生成的输入框，导致所有输入共享同一个状态；同时[value]与formControl指令冲突，FormControl会接管值的控制，所以[value]设置不生效。

正确的做法是使用FormArray为每一行输入框创建独立的FormControl，步骤如下：

1. 改造TS代码，用FormArray替代单个FormControl #

导入必要的表单模块，初始化FormArray并为每一行设置初始值：

import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormControl } from '@angular/forms';

@Component({
  // 保留你的组件元数据
})
export class YourComponent {
  amountsArray: FormArray;
  isEditMonth = false;
  datasource: { data: any[] } = { data: [] }; // 你的数据源

  constructor(private fb: FormBuilder) {}

  onEditClick(data: any[]) {
    this.isEditMonth = true;
    // 根据数据源创建FormArray，每个元素对应row的amount作为初始值
    this.amountsArray = this.fb.array(
      data.map(row => new FormControl(row.amount || ''))
    );
  }

  onAmountChanged(index: number, row: any) {
    // 获取对应索引的输入值，更新到row中
    const inputValue = this.amountsArray.at(index).value;
    row.amount = inputValue;
    // 这里可以添加其他业务逻辑，比如提交或校验
  }
}

2. 修改HTML模板，绑定FormArray的对应控件 #

移除[value]属性，通过索引绑定FormArray中的单个FormControl：

<ng-container matColumnDef="amount">
    <th mat-header-cell *matHeaderCellDef>Amount
        <button mat-icon-button (click)="onEditClick(datasource.data)">
            <mat-icon style="cursor: pointer;" class="ml-2 mr-2" >edit</mat-icon>
        </button>
    </th>
    <td mat-cell *matCellDef="let row; let i=index;">
        <ng-container *ngIf="isActual">{{row.amount || "-- --"}}</ng-container>
        <mat-form-field *ngIf="isEditMonth" class="example-full-width month-textbox" appearance="outline">
            <input matInput type="text" [formControl]="amountsArray.at(i)" (change)="onAmountChanged(i, row)">
        </mat-form-field>
    </td>
</ng-container>

关键说明 #

• FormArray可以管理一组FormControl，每个输入框绑定独立的控件，避免值同步问题。
• 初始化FormArray时，通过data.map为每一行生成带初始值的FormControl，确保默认值正确显示。
• 移除[value]属性，因为FormControl会自动管理输入框的值，两者同时使用会导致冲突。

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