Angular Reactive Form 可重复产品/序列号嵌套表单管理问题咨询

核心思路 #

使用Angular响应式表单的FormArray控件承载多组产品信息，天然支持动态新增/删除条目，无需手动维护对象数组，表单取值时可直接生成你需要的[{product: xxx, SN: xxx}, ...]结构。

步骤1：父组件主表单初始化 #

首先在父组件中导入响应式表单相关依赖，初始化包含FormArray的主表单：

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

export class ParentFormComponent {
  parentForm: FormGroup;

  // 封装getter简化FormArray调用，避免每次重复类型转换
  get productList(): FormArray {
    return this.parentForm.get('productList') as FormArray;
  }

  constructor(private fb: FormBuilder) {
    // 初始化主表单
    this.parentForm = this.fb.group({
      name: ['', Validators.required],
      company: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      address: ['', Validators.required],
      returnInstructions: [''],
      // 用FormArray承载多组产品+SN数据，初始默认1组
      productList: this.fb.array([
        this.createProductItem()
      ])
    })
  }

  // 封装创建单组产品条目的方法，新增时直接调用
  private createProductItem(): FormGroup {
    return this.fb.group({
      product: ['', Validators.required],
      SN: ['', Validators.required]
    })
  }
}

步骤2：实现新增/删除产品条目方法 #

在父组件中添加两个方法处理动态操作：

// 新增一组产品字段
addProduct(): void {
  this.productList.push(this.createProductItem());
}

// 删除指定索引的产品组
removeProduct(index: number): void {
  this.productList.removeAt(index);
}

步骤3：封装产品字段子组件 #

新建产品子组件，接收单组产品的FormGroup作为输入：

子组件TS代码 #

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-product-item',
  templateUrl: './product-item.component.html'
})
export class ProductItemComponent {
  @Input() productGroup!: FormGroup;
  @Input() index!: number;
  // 向父组件传递删除事件
  @Output() remove = new EventEmitter<number>();
}

子组件模板代码 #

<div [formGroup]="productGroup">
  <input formControlName="product" placeholder="请输入Product">
  <input formControlName="SN" placeholder="请输入Serial Number">
  <button type="button" (click)="remove.emit(index)">删除本条</button>
</div>

步骤4：父组件模板绑定 #

父组件模板中循环渲染产品子组件，同时绑定新增按钮：

<form [formGroup]="parentForm">
  <!-- 基础字段渲染 -->
  <div>
    <label>姓名</label>
    <input formControlName="name">
  </div>
  <div>
    <label>公司</label>
    <input formControlName="company">
  </div>
  <div>
    <label>邮箱</label>
    <input formControlName="email">
  </div>
  <div>
    <label>地址</label>
    <input formControlName="address">
  </div>

  <!-- 动态产品字段渲染 -->
  <div formArrayName="productList">
    <app-product-item 
      *ngFor="let group of productList.controls; let i = index"
      [productGroup]="group"
      [index]="i"
      (remove)="removeProduct($event)"
    ></app-product-item>
  </div>
  <button type="button" (click)="addProduct()">新增产品</button>

  <!-- 退运说明字段 -->
  <div>
    <label>退运说明</label>
    <textarea formControlName="returnInstructions"></textarea>
  </div>
</form>

步骤5：表单取值 #

直接通过表单value即可拿到你需要的所有数据结构，无需手动拼接：

// 全量表单值
console.log(this.parentForm.value);
// 产品数组结构，即你需要的[{product:xxx, SN:xxx}, ...]
console.log(this.parentForm.value.productList);
// 基础字段取值也可以简化为以下写法，不用逐个访问controls
console.log(this.parentForm.value.name);
console.log(this.parentForm.value.company);

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