如何在动态传入表单组件的对话框中返回表单值？

核心思路 #

通过动态组件的输出事件传递表单数据到对话框组件，再在对话框关闭时将数据传递回父组件，具体步骤如下：

1. 给动态表单组件添加输出属性 #

在你的动态表单组件中，定义@Output事件发射器，在表单提交时触发并传递表单数据：

import { Component, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form [formGroup]="form" (ngSubmit)="handleSubmit()">
      <input formControlName="username" placeholder="用户名">
      <input formControlName="email" placeholder="邮箱" type="email">
      <button type="submit">提交表单</button>
    </form>
  `
})
export class DynamicFormComponent {
  form = new FormGroup({
    username: new FormControl(''),
    email: new FormControl('')
  });
  // 定义输出事件
  @Output() formSubmitted = new EventEmitter<any>();

  handleSubmit() {
    if (this.form.valid) {
      // 提交时emit表单数据
      this.formSubmitted.emit(this.form.value);
    }
  }
}

2. 在对话框组件中监听动态组件的输出事件 #

修改对话框组件，在动态加载组件后，订阅其输出事件并暂存数据，关闭对话框时传递给父组件：

import { Component, Inject, ViewChild, ViewContainerRef } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-dialog',
  template: `
    <div #componentContainer></div>
    <div style="margin-top: 20px;">
      <button mat-button (click)="closeDialog()">取消</button>
      <button mat-raised-button color="primary" (click)="confirmSubmit()">确认</button>
    </div>
  `
})
export class DialogComponent {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container: ViewContainerRef;
  private formResult: any;

  constructor(
    private resolver: ComponentFactoryResolver,
    private dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.loadDynamicComponent();
  }

  loadDynamicComponent() {
    // 创建动态组件实例
    const componentFactory = this.resolver.resolveComponentFactory(this.data.component);
    const componentRef = this.container.createComponent(componentFactory);
    
    // 订阅动态组件的输出事件，暂存表单数据
    componentRef.instance.formSubmitted.subscribe((data: any) => {
      this.formResult = data;
    });

    // 若需给动态组件传输入属性，可在此赋值
    if (this.data.inputs) {
      Object.assign(componentRef.instance, this.data.inputs);
    }
  }

  confirmSubmit() {
    // 确认时关闭对话框并传递表单数据
    this.dialogRef.close(this.formResult);
  }

  closeDialog() {
    this.dialogRef.close(null);
  }
}

3. 父组件接收对话框返回的数据 #

在父组件调用对话框的代码中，通过afterClosed()订阅获取返回的表单数据：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component';
import { DynamicFormComponent } from './dynamic-form.component';

@Component({
  selector: 'app-parent',
  template: `<button mat-raised-button (click)="openDialog()">打开对话框</button>`
})
export class ParentComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(DialogComponent, {
      data: {
        component: DynamicFormComponent
        // 如需传输入属性，添加inputs字段：
        // inputs: { title: '用户表单' }
      }
    });

    // 订阅对话框关闭事件，获取表单数据
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        console.log('获取到的表单数据:', result);
        // 这里处理表单数据（比如提交到后端）
      }
    });
  }
}

注意事项 #

• Angular 9+ 版本无需在模块的entryComponents中声明动态组件（Ivy 编译器自动支持），低版本需手动添加。
• 确保动态表单组件的表单验证逻辑正确，只有合法数据才触发输出事件。

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