Angular表单控件amount输入框无法正常显示值问题排查

问题现象 #

表单中amount控件已存在且有值，页面上{{ element.amount }}能正确输出数字1，但对应的输入框却显示为null。尝试拼接字符串service.defaultAmount + '-TEST'时，输入框显示null-TEST，但直接赋值固定数字或字符串则能正常显示。静态测试数据功能正常，使用API异步获取数据时出现该问题。

相关代码 #

HTML模板 #

@for (service of dataSource; track dataSource; let index = $index) {
  <table mat-table *ngIf="dataSource && dataSource[index]" [dataSource]="dataSource[index]" formArrayName="services">
    <!-- 其他代码 -->
    <ng-container matColumnDef="amount">
      <th mat-header-cell *matHeaderCellDef>Amount</th>
      <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i">
        {{ element.amount }} <!-- 输出1 -->
        <mat-form-field *ngIf="element.amount">
          <mat-label>Amount</mat-label>
          <input matInput placeholder="Enter Amount" formControlName="amount">
        </mat-form-field>
      </td>
    </ng-container>
    <!-- 其他代码 -->
  </table>
}

表单初始化逻辑 #

private createForm(quotationView: QuotationView): void {
  const serviceFormGroup = this._formBuilder.array<FormGroup>([]);

  quotationView.services.forEach((service: Service) => {
    console.log(service.defaultAmount); // 输出1
    const defaultAmount = service.defaultAmount;
    const groupOfServices = this._formBuilder.group({
      serviceIsSelected: (service.typeOfService !== 'optional'),
      amount: new FormControl({ value: service.defaultAmount, disabled: false }, Validators.required),
      ...service
    });
    serviceFormGroup.push(groupOfServices);
  });
}

异步数据加载逻辑 #

ngOnInit(): void {
  this._activatedRoute.params.subscribe((params: Params): void => {
    this._quotationViewService.markQuotationAsSeen(params['id']);
    this._quotationViewService.getQuotation(params['id']).subscribe((quotation: QuotationView): void => {
      this.createForm(quotation);
      this.quotation = this.form.value;
      this.dataSource = this.groupServices(this.form.get('services')?.value);
    })
  });
}

private groupServices(services: QuotationView['services']): Service[][] {
  return services.reduce((acc: Service[][], obj: Service) => {
    const existingGroup = acc.find(group => group[0].sectionSequence === obj.sectionSequence);
    existingGroup ? existingGroup.push(obj) : acc.push([obj]);
    return acc;
  }, []);
}

问题根源与修复方案 #

1. FormGroup字段覆盖（核心问题） #

创建FormGroup时，...service展开在amount控件定义之后，若service对象本身包含amount字段（值为null/undefined），会直接覆盖前面定义的FormControl，导致表单控件失效，输入框无法绑定正确值。

修复：
调整字段顺序，先展开service，再定义表单控件，确保控件不会被覆盖：

const groupOfServices = this._formBuilder.group({
  ...service, // 先展开原始service字段
  serviceIsSelected: (service.typeOfService !== 'optional'),
  amount: new FormControl({ value: service.defaultAmount, disabled: false }, Validators.required),
});

2. 异步数据类型不匹配 #

API返回的service.defaultAmount可能是字符串类型（如"1"），而非数字类型，Angular表单对类型敏感，可能导致值无法正确渲染。

修复：
显式转换数据类型：

const defaultAmount = Number(service.defaultAmount) || 0; // 转换为数字，空值时设为0

3. 数据源与表单同步问题 #

当前dataSource基于form.value生成，但表单初始化后form.value可能未及时更新，或与原始数据存在差异。建议直接基于API返回的原始数据分组：

this.dataSource = this.groupServices(quotation.services); // 用原始quotation.services而非form.value

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