如何在 Angular Material 对话框中使用表单？

2024-07-14 07:08:54

如何将表单传递给 Angular Material 对话框？

在 Angular Material 应用中，对话框常用于展示表单，实现用户交互。然而，直接将表单组件嵌入对话框并非易事，如何确保表单的正确显示和功能运作，成为了困扰许多开发者的难题。本文将详细介绍如何利用 MAT_DIALOG_DATA 将表单数据传递给 Angular Material 对话框，并提供简单易懂的代码示例，帮助您轻松解决问题。

问题根源：组件结构限制

很多开发者试图直接将表单的模板引用或组件实例通过 MAT_DIALOG_DATA 传递给对话框。但由于 Angular 组件的渲染和生命周期管理机制，我们无法直接嵌入另一个组件的 HTML 结构，导致这种方法失效。

解决方案：数据驱动表单

解决问题的关键在于转变思路：我们传递的不是整个表单，而是表单数据 。这意味着将表单的数据模型作为 MAT_DIALOG_DATA 的一部分传递给对话框，并在对话框内部根据数据模型动态生成表单。

步骤拆解

1. 定义表单数据模型

首先，我们需要定义一个 TypeScript 接口或类来表单的数据模型。例如：

interface FormData {
  date: Date;
  firstName: string;
}

2. 创建可复用对话框组件

创建一个新的 Angular 组件用于展示对话框，并使用 @Inject 装饰器注入 MAT_DIALOG_DATA，以便访问传递的表单数据。

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

@Component({
  selector: 'app-form-dialog',
  templateUrl: './form-dialog.component.html',
  styleUrls: ['./form-dialog.component.scss']
})
export class FormDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: { formData: FormData }) {}
}

3. 在对话框组件中构建表单

在对话框组件的 HTML 模板中，根据传入的 formData 动态构建表单。

<form #dialogForm="ngForm" (ngSubmit)="submitForm(dialogForm)">
  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="选择日期" name="date" [(ngModel)]="data.formData.date" required>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
    <mat-error *ngIf="dialogForm.controls.date.invalid && dialogForm.controls.date.touched">请选择日期</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="姓名" name="firstName" [(ngModel)]="data.formData.firstName" required>
    <mat-error *ngIf="dialogForm.controls.firstName.invalid && dialogForm.controls.firstName.touched">请输入姓名</mat-error>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit" [disabled]="dialogForm.invalid">提交</button>
</form>

4. 传递表单数据并打开对话框

在需要打开对话框的组件中，将表单数据模型作为 data 属性传递给 dialog.open 方法。

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { FormDialogComponent } from './form-dialog.component';
import { FormData } from './form-data.interface'; // 假设您已定义该接口

@Component({
  // ...
})
export class MyComponent {
  formData: FormData = { date: new Date(), firstName: '' };

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(FormDialogComponent, {
      width: '460px',
      disableClose: true,
      autoFocus: false,
      panelClass: 'form-dialog',
      data: {
        formData: this.formData
      },
    });
  }
}