Angular FormArray动态获取字段键的实现方法问询

方案一：从FormGroup动态提取字段键 #

如果你的FormArray中每个项都是FormGroup，你可以直接从FormGroup的controls对象中提取所有字段键，无需提前定义。

组件代码 #

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

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html'
})
export class DynamicFormComponent {
  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，包含一个带默认字段的FormArray
    this.dynamicForm = this.fb.group({
      customFields: this.fb.array([
        this.fb.group({
          department: [''],
          position: ['']
        })
      ])
    });
  }

  // 便捷获取FormArray的 getter
  get customFields(): FormArray {
    return this.dynamicForm.get('customFields') as FormArray;
  }

  // 添加新的字段组
  addCustomField() {
    this.customFields.push(this.fb.group({
      department: [''],
      position: ['']
    }));
  }

  // 提取FormGroup的所有字段键
  getControlNames(formGroup: FormGroup): string[] {
    return Object.keys(formGroup.controls);
  }
}

模板代码 #

<form [formGroup]="dynamicForm">
  <div formArrayName="customFields">
    <!-- 遍历FormArray中的每个FormGroup -->
    <div *ngFor="let fieldGroup of customFields.controls; let i = index" [formGroupName]="i">
      <!-- 动态遍历当前FormGroup的所有字段键 -->
      <div *ngFor="let controlName of getControlNames(fieldGroup)">
        <label>{{ controlName | titlecase }}</label>
        <input [formControlName]="controlName" type="text" placeholder="请输入{{ controlName | titlecase }}">
      </div>
      <button (click)="customFields.removeAt(i)">移除该组</button>
    </div>
  </div>
  <button (click)="addCustomField()">添加新字段组</button>
</form>

这种方式的优势是完全依赖FormGroup的结构自动渲染，不需要额外维护元数据，适合字段结构固定但不想硬编码的场景。

方案二：通过字段元数据实现更灵活的动态渲染 #

如果需要对字段进行更多自定义配置（比如自定义标签、输入类型、验证规则等），可以提前定义一份字段元数据数组，通过遍历元数据来渲染表单，同时动态构建FormGroup。

组件代码 #

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

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html'
})
export class DynamicFormComponent {
  dynamicForm: FormGroup;
  // 定义字段元数据，可扩展更多配置项
  fieldMetadata = [
    { key: 'department', label: '所属部门', type: 'text', validators: [Validators.required] },
    { key: 'position', label: '职位', type: 'text' },
    { key: 'employeeId', label: '员工编号', type: 'number' }
  ];

  constructor(private fb: FormBuilder) {
    this.dynamicForm = this.fb.group({
      customFields: this.fb.array([this.createCustomFieldGroup()])
    });
  }

  get customFields(): FormArray {
    return this.dynamicForm.get('customFields') as FormArray;
  }

  // 根据元数据动态创建FormGroup
  createCustomFieldGroup(): FormGroup {
    const group = this.fb.group({});
    this.fieldMetadata.forEach(field => {
      group.addControl(field.key, this.fb.control('', field.validators || []));
    });
    return group;
  }

  addCustomField() {
    this.customFields.push(this.createCustomFieldGroup());
  }
}

模板代码 #

<form [formGroup]="dynamicForm">
  <div formArrayName="customFields">
    <div *ngFor="let fieldGroup of customFields.controls; let i = index" [formGroupName]="i">
      <!-- 遍历字段元数据渲染表单 -->
      <div *ngFor="let field of fieldMetadata">
        <label>{{ field.label }}</label>
        <input 
          [formControlName]="field.key" 
          [type]="field.type" 
          placeholder="请输入{{ field.label }}"
          [class.invalid]="fieldGroup.get(field.key)?.invalid && fieldGroup.get(field.key)?.touched"
        >
        <span *ngIf="fieldGroup.get(field.key)?.invalid && fieldGroup.get(field.key)?.touched">
          {{ field.label }}为必填项
        </span>
      </div>
      <button (click)="customFields.removeAt(i)">移除该组</button>
    </div>
  </div>
  <button (click)="addCustomField()">添加新字段组</button>
</form>

这种方案的灵活性更高，你可以随时修改元数据来调整表单字段的配置，无需改动模板和表单构建逻辑，适合复杂多变的表单场景。

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