如何基于泛型类型创建支持任意FormGroup结构的可动态增删的Angular组件

我完全理解你的需求——想要构建一个通用的Angular组件，它能管理任意结构的FormGroup列表，支持动态添加和删除项，同时允许父组件通过<ng-template>自定义每一项的表单渲染逻辑。这种通用组件能大大减少重复代码，适配各种表单场景，我来一步步帮你实现它。

核心思路：泛型+工厂函数解决类型擦除问题 #

首先要明确：TypeScript的泛型是编译时类型，运行时会被擦除，所以组件本身没办法直接根据泛型T自动生成对应的FormGroup实例。解决这个问题的关键是让父组件提供一个FormGroup工厂函数，由父组件定义如何创建符合特定结构的FormGroup，组件只负责调用这个函数来新增项。

1. 定义泛型组件类 #

先创建组件的核心类，使用泛型T来约束FormGroup的结构，同时接收父组件传入的初始表单数组、模板和工厂函数：

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

@Component({
  selector: 'app-editable-form-list',
  templateUrl: './editable-form-list.component.html',
  styleUrls: ['./editable-form-list.component.css']
})
export class EditableFormListComponent<T> {
  // 父组件传入的表单数组
  @Input() formArray: FormArray<FormGroup<T>>;
  // 父组件定义的项模板，let-item="item" 会把当前FormGroup传给模板
  @Input() itemTemplate: TemplateRef<{ $implicit: FormGroup<T> }>;
  // 父组件提供的工厂函数，用于创建新的FormGroup<T>实例
  @Input() createFormGroup: () => FormGroup<T>;

  // 新增表单项
  addItem(): void {
    this.formArray.push(this.createFormGroup());
  }

  // 删除指定索引的表单项
  deleteItem(index: number): void {
    this.formArray.removeAt(index);
  }
}

2. 组件模板实现 #

组件的模板很简洁，主要负责遍历表单数组，渲染父组件提供的模板，同时提供增删按钮：

<div class="editable-list">
  <button (click)="addItem()">添加新项</button>
  
  <div *ngFor="let formGroup of formArray.controls; let i = index">
    <!-- 渲染父组件传入的模板，把当前FormGroup作为$implicit传递 -->
    <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: formGroup }"></ng-container>
    
    <button (click)="deleteItem(i)">删除</button>
  </div>
</div>

3. 父组件使用示例 #

现在你可以在父组件中使用这个通用组件，适配任意FormGroup结构：

示例1：简单结构的FormGroup #

比如你的TestForm只有一个color控件：

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

interface TestForm {
  color: FormControl<string | null>;
}

@Component({
  selector: 'app-parent',
  templateUrl: './app-parent.component.html',
})
export class AppParentComponent {
  formArray = new FormArray<FormGroup<TestForm>>([
    this.createTestForm()
  ]);

  // 定义工厂函数，创建符合TestForm结构的FormGroup
  createTestForm(): FormGroup<TestForm> {
    return new FormGroup({
      color: new FormControl<string | null>(null)
    });
  }
}

父组件模板：

<app-editable-form-list 
  [formArray]="formArray"
  [createFormGroup]="createTestForm"
  [itemTemplate]="colorTemplate">
</app-editable-form-list>

<ng-template #colorTemplate let-item>
  <input type="text" [formControl]="item.controls.color" placeholder="输入颜色">
</ng-template>

示例2：复杂结构的FormGroup #

如果FormGroup有多个控件，比如包含color、nickName和hasPet：

interface ComplexTestForm {
  color: FormControl<string | null>;
  nickName: FormControl<string | null>;
  hasPet: FormControl<boolean | null>;
}

@Component({
  selector: 'app-parent',
  templateUrl: './app-parent.component.html',
})
export class AppParentComponent {
  complexFormArray = new FormArray<FormGroup<ComplexTestForm>>([
    this.createComplexTestForm()
  ]);

  createComplexTestForm(): FormGroup<ComplexTestForm> {
    return new FormGroup({
      color: new FormControl<string | null>(null),
      nickName: new FormControl<string | null>(null),
      hasPet: new FormControl<boolean | null>(false)
    });
  }
}

父组件模板：

<app-editable-form-list 
  [formArray]="complexFormArray"
  [createFormGroup]="createComplexTestForm"
  [itemTemplate]="complexTemplate">
</app-editable-form-list>

<ng-template #complexTemplate let-item>
  <input type="text" [formControl]="item.controls.color" placeholder="颜色">
  <input type="text" [formControl]="item.controls.nickName" placeholder="昵称">
  <input type="checkbox" [formControl]="item.controls.hasPet"> 是否养宠物
</ng-template>

关键说明 #

• 为什么需要工厂函数？ 因为TypeScript泛型在运行时不存在，组件无法知道T对应的具体控件结构，必须由父组件提供创建逻辑，这样才能保证新增的FormGroup和已有结构完全一致。
• 模板传递的灵活性 通过ngTemplateOutlet和ngTemplateOutletContext，父组件可以完全自定义每个FormGroup的渲染方式，组件只负责管理列表的增删逻辑，实现了逻辑和视图的解耦。
• 类型安全 泛型T确保了组件和父组件之间的类型一致性，避免了类型错误，比如父组件传入的模板只能访问T中定义的控件。

内容来源于stack exchange