mat-table中每行的formGroup数组

mat-table 是 Angular Material 库中的一个组件，用于展示表格数据。当需要在表格的每一行中使用 FormGroup 来管理表单数据时，可以通过以下步骤实现：

基础概念

FormGroup: Angular 表单模块中的一个类，用于表示一个表单组，包含一组相关的表单控件。
mat-table: Angular Material 提供的一个用于展示数据的表格组件。

优势

数据绑定: 使用 FormGroup 可以方便地将表格中的每一行数据与表单控件绑定，实现双向数据绑定。
验证: 可以对每个表单控件进行验证，并在界面上显示验证结果。
可维护性: 将每一行的数据封装在一个 FormGroup 中，使得代码更加模块化和易于维护。

类型

动态表单: 根据数据动态生成表单控件。
静态表单: 表单控件的结构在编译时就已确定。

应用场景

数据编辑: 在表格中直接编辑每一行的数据。
表单验证: 对用户输入的数据进行实时验证。
复杂数据展示: 当表格中的每一行需要展示和编辑多个字段时。

示例代码

假设我们有一个包含用户信息的表格，每一行都需要编辑用户的姓名和年龄。

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

@Component({
  selector: 'app-user-table',
  template: `
    <form [formGroup]="userForm">
      <table mat-table [dataSource]="users" class="mat-elevation-z8">
        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef> Name </th>
          <td mat-cell *matCellDef="let element; let i = index">
            <input formControlName="name" placeholder="Name">
          </td>
        </ng-container>

        <!-- Age Column -->
        <ng-container matColumnDef="age">
          <th mat-header-cell *matHeaderCellDef> Age </th>
          <td mat-cell *matCellDef="let element; let i = index">
            <input formControlName="age" placeholder="Age">
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </form>
  `
})
export class UserTableComponent {
  users = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 },
    { name: 'Charlie', age: 35 }
  ];

  displayedColumns: string[] = ['name', 'age'];
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      users: this.fb.array(this.users.map(user => this.fb.group({
        name: [user.name],
        age: [user.age]
      })))
    });
  }
}

遇到的问题及解决方法

问题：表单控件无法正确绑定数据

原因: 可能是由于 formControlName 没有正确设置，或者 FormGroup 的结构与数据不匹配。

解决方法:

确保 formControlName 与 FormGroup 中的控件名称一致。
使用 FormArray 来动态管理每一行的 FormGroup。

// 在组件中定义 FormArray
get usersFormArray() {
  return this.userForm.get('users') as FormArray;
}

// 在模板中使用 FormArray
<td mat-cell *matCellDef="let element; let i = index">
  <input [formControlName]="i" placeholder="Name">
</td>

通过这种方式，可以确保每一行的表单控件都能正确绑定到相应的数据上。