Angular中Mat Dialog关闭后push及FormArray按数量动态生成行实现

1. Mat Dialog关闭后执行push操作 #

Mat Dialog提供了afterClosed()方法，返回一个Observable，订阅它就能在对话框关闭后执行push等后续操作：

// 打开目标对话框
const dialogRef = this.dialog.open(YourDialogComponent);

// 订阅对话框关闭事件
dialogRef.afterClosed().subscribe(result => {
  // 按需执行push操作，比如给数组添加数据
  if (result) { // 可判断是否有返回结果再执行
    this.dataList.push(result);
    // 如果是给FormArray添加表单项
    const targetFormArray = this.yourForm.get('formArrayName') as FormArray;
    targetFormArray.push(this.fb.group({
      // 配置表单控件
    }));
  }
});

若需要从对话框传递数据到父组件，可在对话框内通过dialogRef.close(传递的数据)实现，比如确认按钮点击时：

confirmHandler() {
  this.dialogRef.close({ id: 1, name: '示例数据' });
}

2. 根据数量动态生成FormArray表单行 #

步骤1：定义表单结构 #

先创建包含数量控件和FormArray的FormGroup：

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

// 组件内部
yourForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.yourForm = this.fb.group({
    serialCount: [3], // 默认生成3行表单
    serialForms: this.fb.array([])
  });
}

// 便捷获取FormArray实例
get serialForms() {
  return this.yourForm.get('serialForms') as FormArray;
}

步骤2：编写表单更新方法 #

根据数量值调整FormArray的项数：

updateSerialForms() {
  const targetCount = this.yourForm.get('serialCount')?.value || 0;
  const currentCount = this.serialForms.length;

  // 新增表单项
  if (targetCount > currentCount) {
    for (let i = currentCount; i < targetCount; i++) {
      this.serialForms.push(this.fb.group({
        serialNumber: [''],
        // 其他需要的表单控件
      }));
    }
  } 
  // 移除多余表单项
  else if (targetCount < currentCount) {
    while (this.serialForms.length > targetCount) {
      this.serialForms.removeAt(this.serialForms.length - 1);
    }
  }
}

步骤3：初始化与监听数量变化 #

组件初始化时生成初始表单，并监听数量控件的变化实时更新：

ngOnInit() {
  this.updateSerialForms();
  // 监听数量输入框的变化
  this.yourForm.get('serialCount')?.valueChanges.subscribe(() => {
    this.updateSerialForms();
  });
}

步骤4：模板渲染动态表单 #

通过*ngFor遍历FormArray的控件，渲染每行表单：

<form [formGroup]="yourForm">
  <label>序列号数量：</label>
  <input type="number" formControlName="serialCount" min="0">

  <div formArrayName="serialForms">
    <div *ngFor="let form of serialForms.controls; let i = index" [formGroupName]="i">
      <p>第 {{i+1}} 行</p>
      <input formControlName="serialNumber" placeholder="输入序列号">
      <!-- 其他表单控件 -->
    </div>
  </div>
</form>

注意：如果组件支持销毁，监听valueChanges时建议使用takeUntil等操作符取消订阅，避免内存泄漏。

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