Angular：如何使用Set Control在Form Array中填充ProductDetails数据？

先梳理你代码里的关键问题，再给出修正后的实现：

一、代码中的错误点 #

1. 函数名不匹配：ngOnInit里调用this.CreateItem()，但实际定义的是CreateItemRec()，导致初始表单创建错误
2. 未定义变量：displayProduct中使用的this.product未声明，应该用传入的Details或赋值后的this.productDetails
3. 字段大小写不匹配：ProductDetails接口中关联的产品是ProductGroup（大写P），但代码里写成productGroup（小写p），会导致无法读取数据
4. FormArray 赋值错误：直接将this.product传入fb.array()，没有把ProductDetails数据转换成对应的FormGroup结构
5. 无效字段赋值：Product接口里没有description字段，patchValue中包含该字段会导致无效赋值

二、修正后的完整实现 #

1. 保持DTO定义（注意字段大小写一致性） #

/* Defines the product entity */
export interface Product {
  id: number;
  productName: string;
  productCode: string;
  starRating: number;
}

export interface ProductDetails{
  propertyNumber: number;
  itemDescription: string;
  ProductGroup: Product;
}

2. 组件代码修正 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { Product, ProductDetails } from './product.model';
import { ProductService } from './product.service';
import { NumberValidators } from './number.validator';

@Component({
  selector: 'app-product-edit',
  templateUrl: './product-edit.component.html'
})
export class ProductEditComponent implements OnInit, OnDestroy {
  productForm: FormGroup;
  productDetails: ProductDetails;
  private sub: Subscription;

  constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private productService: ProductService
  ) {}

  ngOnInit(): void {
    // 初始化表单，FormArray 可根据需求设置初始项或空数组
    this.productForm = this.fb.group({
      productName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
      productCode: ['', Validators.required],
      starRating: ['', NumberValidators.range(1, 5)],
      tags: this.fb.array([]) // 设为空数组，后续从接口数据填充
    });

    this.sub = this.route.paramMap.subscribe(params => {
      const id = +params.get('id');
      this.getProduct(id);
    });
  }

  // 创建FormArray的单个项，支持传入初始数据
  createItem(initialData?: {propertyNumber?: number, itemDescription?: string}): FormGroup {
    return this.fb.group({  
      propertyNumber: [initialData?.propertyNumber || '', Validators.required],
      itemDescription: [initialData?.itemDescription || '', Validators.required],
    });
  }

  // 获取ProductDetails数据后填充表单
  displayProduct(details: ProductDetails): void {
    if (this.productForm) {
      this.productForm.reset();
    }
    this.productDetails = details;

    // 填充主表单的Product相关字段
    this.productForm.patchValue({
      productName: this.productDetails.ProductGroup.productName,
      productCode: this.productDetails.ProductGroup.productCode,
      starRating: this.productDetails.ProductGroup.starRating
    });

    // 构建FormArray：将ProductDetails转换为FormGroup并创建数组
    const tagsArray = this.fb.array([
      this.createItem({
        propertyNumber: this.productDetails.propertyNumber,
        itemDescription: this.productDetails.itemDescription
      })
    ]);

    // 替换表单中的tags FormArray控件
    this.productForm.setControl('tags', tagsArray);
  }

  // 假设的获取数据方法
  getProduct(id: number): void {
    this.productService.getProductDetails(id).subscribe(
      (details: ProductDetails) => this.displayProduct(details),
      error => console.error('获取产品数据失败', error)
    );
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }

  // 辅助方法：获取tags FormArray（用于模板中遍历）
  get tags(): FormArray {
    return this.productForm.get('tags') as FormArray;
  }
}

三、多ProductDetails场景扩展 #

如果业务是一个Product对应多个ProductDetails，调整DTO和填充逻辑：

调整后的DTO #

export interface Product {
  id: number;
  productName: string;
  productCode: string;
  starRating: number;
  productDetails: ProductDetails[]; // 新增ProductDetails数组
}

export interface ProductDetails{
  propertyNumber: number;
  itemDescription: string;
}

对应的displayProduct方法 #

displayProduct(product: Product): void {
  if (this.productForm) {
    this.productForm.reset();
  }

  // 填充主表单字段
  this.productForm.patchValue({
    productName: product.productName,
    productCode: product.productCode,
    starRating: product.starRating
  });

  // 批量创建FormGroup并构建FormArray
  const tagsArray = this.fb.array(
    product.productDetails.map(detail => this.createItem(detail))
  );

  this.productForm.setControl('tags', tagsArray);
}

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