如何实现Angular初始显示表单、点击+按钮重复添加相同表单组件？

嘿，这个需求我之前刚好处理过，Angular的Reactive Forms体系里的FormArray就是专门解决这种“动态添加重复表单块”场景的！我给你拆解一下具体实现步骤，完全匹配你要的“预先显示初始UI+无限点击添加”的需求：

1. 核心思路：用FormArray管理重复的表单组 #

FormArray是Angular表单模块里用来管理一组同结构FormGroup的容器，正好对应你要重复的UI组件——每个UI块对应一个FormGroup，所有块都放在FormArray里，初始先塞一个FormGroup进去实现“预先显示”，点击+按钮就往FormArray里push新的FormGroup即可。

2. 具体实现步骤 #

第一步：初始化表单结构（组件类） #

先在组件里引入必要的表单模块，然后通过FormBuilder创建包含FormArray的主表单，并且预先添加第一个表单块对应的FormGroup：

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

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化主表单，包含一个名为items的FormArray
    this.myForm = this.fb.group({
      items: this.fb.array([this.createItem()]) // 预先添加第一个表单块
    });
  }

  // 创建单个表单块对应的FormGroup（你可以根据需求添加控件和验证）
  private createItem(): FormGroup {
    return this.fb.group({
      username: ['', Validators.required],
      phone: ['', Validators.pattern(/^1[3-9]\d{9}$/)],
      // 这里添加你每个重复UI需要的其他表单控件
    });
  }

  // 定义getter，方便模板快速访问FormArray
  get items(): FormArray {
    return this.myForm.get('items') as FormArray;
  }
}

第二步：模板绑定动态表单（HTML） #

在模板里通过formArrayName绑定FormArray，用*ngFor遍历所有表单块，每个块绑定对应的formGroupName，再加上添加/删除按钮：

<form [formGroup]="myForm" class="dynamic-form">
  <!-- 遍历FormArray里的所有表单块 -->
  <div formArrayName="items" *ngFor="let item of items.controls; let i = index" class="form-block">
    <div [formGroupName]="i">
      <h4>表单块 {{i+1}}</h4>
      <label>用户名：</label>
      <input formControlName="username" placeholder="请输入用户名">
      <!-- 可以显示验证错误 -->
      <span *ngIf="items.controls[i].get('username')?.invalid && items.controls[i].get('username')?.touched">用户名不能为空</span>

      <label>手机号：</label>
      <input formControlName="phone" placeholder="请输入手机号">
      <span *ngIf="items.controls[i].get('phone')?.invalid && items.controls[i].get('phone')?.touched">请输入正确的手机号</span>

      <!-- 删除按钮（可选） -->
      <button type="button" (click)="removeItem(i)" [disabled]="items.length === 1">- 删除</button>
    </div>
  </div>

  <!-- 添加新表单块的按钮 -->
  <button type="button" (click)="addItem()">+ 添加新表单</button>
</form>

第三步：实现添加/删除逻辑（组件类） #

在组件里补充添加和删除表单块的方法：

// 添加新的表单块
addItem(): void {
  this.items.push(this.createItem());
}

// 删除指定索引的表单块
removeItem(index: number): void {
  this.items.removeAt(index);
}

3. 额外优化建议 #

• 样式区分：给每个.form-block加个边框、内边距，让重复的表单块更清晰；
• 批量取值：提交表单时，直接通过this.myForm.value就能拿到所有表单块的数据，格式是{ items: [{username: '', phone: ''}, ...] }；
• 编辑场景适配：如果需要回显已有数据，只需要在ngOnInit里循环调用this.items.push(this.fb.group(已有数据对象))即可；
• 表单验证：可以给整个FormArray加自定义验证，比如限制最多添加多少个表单块。

这样实现后，页面加载时会自动显示第一个表单块，每次点击“+”按钮就会生成一个完全相同的新块，完全满足你的需求～

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