Angular：如何在Material模态框编辑Reactive Form的FormArray单个控件

核心问题 #

模态框内的表单字段未正确关联FormArray中对应的单个FormGroup，导致表单绑定报错。只需将选中的FormGroup绑定到模态框的表单容器，即可实现字段与FormControl的关联。

步骤1：修正组件类逻辑与笔误 #

你原代码中addStudent方法存在笔误（this.sensors.push应为this.students.push），同时需要明确toEditStudentControl的类型为FormGroup：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog'; // 按实际使用的模态框服务调整

@Component({
  selector: 'app-student-form',
  templateUrl: './student-form.component.html',
  styleUrls: ['./student-form.component.css']
})
export class StudentFormComponent {
  form: FormGroup;
  toEditStudentControl: FormGroup; // 明确声明为FormGroup类型
  editIndex: number;

  constructor(private fb: FormBuilder, private modalService: MatDialog) {
    this.form = this.fb.group({
      students: this.fb.array([])
    });
  }

  get students(): FormArray {
    return this.form.get('students') as FormArray;
  }

  addStudent(): void {
    // 修正笔误并移除多余语法符号
    this.students.push(this.fb.group({
      studentUniqueID: new FormControl(),
      name: new FormControl(''),
      grade: new FormControl('')
    }));
  }

  openModal(content, id): void {
    // 明确类型转换，确保获取的是FormGroup
    this.toEditStudentControl = this.students.controls[id] as FormGroup;
    this.editIndex = id;
    this.modalService.open(content, { width: '400px' });
  }
}

步骤2：修改模态框模板，绑定FormGroup #

在模态框的内容容器上添加[formGroup]="toEditStudentControl"，并通过formControlName绑定具体字段：

<div [formGroup]="form" class="container">
    <div formArrayName="students">
        <button type="button" (click)="addStudent()"> 添加学生 </button>
        <div class="row" *ngFor="let control of students.controls; let i = index">
            <!-- 列表中可显示学生简要信息 -->
            <span>{{ control.get('name')?.value }}</span>
            <button type="button" class="close" aria-label="Close" (click)="openModal(studentModal, i)">
                编辑
            </button>
        </div>
    </div>
</div>

<ng-template #studentModal let-modal>
  <div class="modal-header">
      <h4>编辑学生信息</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.close()">
          <span aria-hidden="true"><i class="material-icons">close</i></span>
      </button>
  </div>
  <!-- 绑定选中的FormGroup到模态框表单容器 -->
  <div class="modal-body" [formGroup]="toEditStudentControl">
      <div class="border-apply">
          <div class="m-b-20">
              <div class="contact-grid">
                <div class="form-group">
                  <label>学生ID</label>
                  <input type="text" class="form-control" formControlName="studentUniqueID">
                </div>
                <div class="form-group">
                  <label>姓名</label>
                  <input type="text" class="form-control" formControlName="name">
                </div>
                <div class="form-group">
                  <label>年级</label>
                  <input type="text" class="form-control" formControlName="grade">
                </div>
              </div>
          </div>
      </div>
  </div>
  <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="modal.close()">取消</button>
      <button type="button" class="btn btn-primary" (click)="modal.close()">保存</button>
  </div>
</ng-template>

关键说明 #

1. 模态框的表单容器必须通过[formGroup]="toEditStudentControl"绑定选中的FormGroup，内部字段才能通过formControlName关联到对应的FormControl。
2. 确保toEditStudentControl是从FormArray中获取的有效FormGroup，类型转换可避免TS类型报错。
3. 原代码中addStudent方法的笔误会导致添加学生功能失效，必须修正。

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