Angular中如何通过单个mat-form-field动态生成指定数量表单字段

完全可以实现，通过配置驱动+*ngFor动态渲染的方式，只需要保留一份mat-form-field模板，就能按需渲染任意数量的表单字段，最终效果和硬编码多个输入项完全一致。

实现步骤 #

1. 定义字段配置类型，改造弹窗组件入参 #

首先在弹窗组件的ts文件中定义字段配置接口，将原来硬编码的表单数据逻辑改为接收外部传入的配置和数据对象：

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

// 单字段配置规则
interface FormFieldConfig {
  key: string; // 绑定到表单数据上的属性名，对应原来硬编码的name/phoneNumber/email
  placeholder: string; // 输入框占位文本
  inputType?: string; // 可选，输入框类型，支持text/tel/email等，默认text
}

@Component({
  selector: 'app-common-form-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class CommonFormDialogComponent {
  constructor(
    @Inject(MAT_DIALOG_DATA) public dialogData: {
      formData: Record<string, any>; // 存储表单值的对象
      fields: FormFieldConfig[]; // 需要渲染的字段配置数组，传多少项就渲染多少个输入框
    }
  ) {}
}

2. 精简模板，只保留一份通用mat-form-field结构 #

删除原来硬编码的3个mat-form-field块，只保留一份被*ngFor包裹的通用模板，所有属性做动态绑定：

<!-- dialog.component.html -->
<mat-dialog-content>
  <mat-form-field 
    *ngFor="let field of dialogData.fields" 
    appearance="fill" 
    class="form-field-full"
  >
    <mat-label>{{field.placeholder}}</mat-label>
    <input
      matInput
      [type]="field.inputType || 'text'"
      [placeholder]="field.placeholder"
      [(ngModel)]="dialogData.formData[field.key]"
    >
  </mat-form-field>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>取消</button>
  <button mat-flat-button color="primary" [mat-dialog-close]="dialogData.formData">确认</button>
</mat-dialog-actions>

在组件样式文件中添加样式避免输入框重叠：

/* dialog.component.scss */
.form-field-full {
  width: 100%;
  margin-bottom: 12px;
}

3. 业务场景调用时传入对应配置即可 #

不同业务组件打开弹窗时，只需要根据需求传入对应的字段配置和初始表单数据，不需要修改弹窗组件本身的代码：

• 渲染姓名、电话、邮箱3个字段的场景：

// 业务组件调用代码
openFullFormDialog() {
  this.dialog.open(CommonFormDialogComponent, {
    width: '520px',
    data: {
      formData: { name: '', phoneNumber: '', email: '' },
      fields: [
        { key: 'name', placeholder: '姓名' },
        { key: 'phoneNumber', placeholder: '联系电话', inputType: 'tel' },
        { key: 'email', placeholder: '邮箱地址', inputType: 'email' }
      ]
    }
  })
}

• 仅渲染姓名、电话2个字段的场景：

openSimpleFormDialog() {
  this.dialog.open(CommonFormDialogComponent, {
    width: '520px',
    data: {
      formData: { name: '', phoneNumber: '' },
      fields: [
        { key: 'name', placeholder: '姓名' },
        { key: 'phoneNumber', placeholder: '联系电话', inputType: 'tel' }
      ]
    }
  })
}

注意事项 #

• 该实现的[(ngModel)]动态绑定逻辑和硬编码写死[(ngModel)]="data.name"的效果完全一致，表单值更新、输入交互没有任何差异
• 如果需要扩展支持下拉选择、日期选择、多行文本框等其他控件类型，只需要在FormFieldConfig中增加控件类型标识，在模板中通过*ngIf判断渲染对应控件即可，扩展成本极低
• 使用前请确保所在模块已经导入MatInputModule、MatDialogModule、FormsModule依赖，否则会出现模板报错

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