Angular动态表单表格：API数据回显异常与新增行值无法同步问题排查

嘿，我仔细看了你的代码和遇到的问题，能发现几个关键的地方出错了，咱们一步步来搞定它们：

核心问题根源 #

你现在用单个FormGroup来管理整个表格的多行数据，但实际上每行都是独立的表单项，Angular里处理这种动态列表表单应该用FormArray——这就是导致你两个问题的根本原因：单个表单组无法正确绑定多个输入框，也没法跟踪每行的修改。

问题1：输入框显示「object Object」 #

你在getStandardValues方法里把整个API返回的数组this.anreden直接赋值给了单个bezeichnung表单控件：

this.genderForm.patchValue({ bezeichnung: this.anreden })

而所有行的输入框都绑定了这个控件，当控件值是数组时，输入框会把数组强制转换成字符串，自然就显示成object Object了。而且这一步操作完全没必要，直接移除这个方法就行。

问题2：编辑后genderDataSource值为空、新增行提交无数据 #

之前你用[value]做单向绑定，输入框的修改不会自动同步到genderDataSource里的对象；再加上单个FormGroup无法跟踪多行输入，导致表单值和数据源完全脱节。

具体修改方案 #

1. 重构表单结构为FormArray

先把你的表单改成包含FormArray的结构，用来存储每行的独立表单组：

public displayedColumns = ['edit', 'delete', 'bezeichnung'];
public genderDataSource: AnredeVorschläge[];
public genderForm: FormGroup;

constructor(
  public dialog: MatDialog,
  public aService: AnredeVorschlägeService,
  private fb: FormBuilder,
) { }

// 创建单行的表单组，支持传入已有数据初始化
createNewGenderFormGroup(anrede?: AnredeVorschläge): FormGroup{
  return this.fb.group({
    anredeVorschlagId: [anrede?.anredeVorschlagId || ''],
    bezeichnung: [anrede?.bezeichnung || '', Validators.required],
  })
}

// 快捷获取FormArray的方法，方便后续调用
get anredeFormArray(): FormArray {
  return this.genderForm.get('anreden') as FormArray;
}

@ViewChild('genderTable') table: MatTable<any>;

ngOnInit(): void {
  // 初始化表单，包含一个用于存储行数据的FormArray
  this.genderForm = this.fb.group({
    anreden: this.fb.array([])
  });

  // 获取API数据并同步到FormArray和数据源
  this.aService.getAnrede()
    .subscribe( data => {
      this.genderDataSource = data;
      const formArray = this.anredeFormArray;
      // 把每个API返回的项转换成表单组，添加到FormArray
      data.forEach(anrede => {
        formArray.push(this.createNewGenderFormGroup(anrede));
      });
  });
}

2. 修改HTML模板，绑定FormArray

把表格和FormArray的控件绑定，让每行输入框对应到正确的表单组：

<div class="controlpanel">
  <div id="operatoren">
    <button mat-mini-fab color="primary"(click)="addRow()" >
      <mat-icon color="white"> add </mat-icon>
    </button>
  </div>
</div>
<div class="container">
  <form [formGroup]="genderForm">
    <table mat-table [dataSource]="anredeFormArray.controls" #genderTable >
      <ng-container matColumnDef="edit">
        <th mat-header-cell *matHeaderCellDef> Speichern <mat-icon color="primary"> save </mat-icon> </th>
        <td mat-cell *matCellDef="let formGroup; let i = index">
          <button mat-mini-fab color="primary" (click)="saveRow(i)" >
            <mat-icon color="white"> save </mat-icon>
          </button>
        </td>
      </ng-container>
      <ng-container matColumnDef="delete">
        <th mat-header-cell *matHeaderCellDef> Löschen <mat-icon color="warn"> clear </mat-icon> </th>
        <td mat-cell *matCellDef="let formGroup; let i = index">
          <button mat-mini-fab color="warn" (click)="confirmDelete(i)" >
            <mat-icon color="white"> clear </mat-icon>
          </button>
        </td>
      </ng-container>
      <ng-container matColumnDef="bezeichnung">
        <th mat-header-cell *matHeaderCellDef> Bezeichnung </th>
        <td mat-cell *matCellDef="let formGroup; let i = index" [formGroup]="formGroup">
          <mat-form-field appearance="standard">
            <!-- 绑定到当前行表单组的bezeichnung控件 -->
            <input matInput type="text" formControlName="bezeichnung" name="bezeichnung-{{i}}">
          </mat-form-field>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </form>
</div>

3. 更新操作方法，同步FormArray和数据源

修改新增、保存、删除方法，确保表单和数据源始终同步：

addRow(){
  const newFormGroup = this.createNewGenderFormGroup();
  this.anredeFormArray.push(newFormGroup);
  this.genderDataSource.push(newFormGroup.value);
  this.table.renderRows();
}

saveRow(index: number){
  // 获取当前行的表单值
  const rowValue = this.anredeFormArray.at(index).value;
  // 同步到genderDataSource
  this.genderDataSource[index] = {...this.genderDataSource[index], ...rowValue};
  // 这里可以调用API保存数据，比如：
  // this.aService.saveAnrede(rowValue).subscribe(res => { /* 处理保存结果 */ });
  console.log('当前行数据:', rowValue);
  console.log('更新后的数据源:', this.genderDataSource);
}

delRow(index: number){
  this.anredeFormArray.removeAt(index);
  this.genderDataSource.splice(index, 1);
  this.table.renderRows();
}

confirmDelete(index: number){
  this.dialog.open(ConfirmDialogComponent).afterClosed().subscribe(confirm => {
    if(confirm){
      this.delRow(index);
    }
  })
}

修改完成后，API返回的Herrn、Frau就能正确显示在输入框里，编辑内容会自动同步到genderDataSource，新增行提交时也能拿到完整的输入值了。

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