Angular 5嵌套响应式表单二级项添加失败问题求助

我来帮你搞定这个嵌套响应式表单的问题！你现在的核心问题是缺少完整的二级表单组创建方法，以及没有正确实现添加二级项的逻辑。下面是完整的解决方案：

1. 完善组件类代码 #

首先补全你的表单构建逻辑，添加createSubItem方法，同时完善添加一级、二级项的方法：

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

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

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() { 
    this.orderForm = this.formBuilder.group({ 
      customerName: '', 
      email: '', 
      items: this.formBuilder.array([this.createItem()]) 
    }); 
  } 

  // 获取items表单数组的快捷方法
  get items(): FormArray {
    return this.orderForm.get('items') as FormArray;
  }

  // 获取指定item下的subItems表单数组
  getSubItems(itemIndex: number): FormArray {
    return this.items.at(itemIndex).get('subItems') as FormArray;
  }

  createItem(): FormGroup { 
    return this.formBuilder.group({ 
      name: 'a', 
      description: 'b', 
      price: 'c', 
      subItems: this.formBuilder.array([this.createSubItem()]) // 启用二级数组
    }); 
  } 

  createSubItem(): FormGroup {
    return this.formBuilder.group({
      subName: '',
      subDescription: '',
      subPrice: ''
    });
  }

  // 添加一级表单项
  addItem(): void {
    this.items.push(this.createItem());
  }

  // 添加二级表单项，需要指定父级item的索引
  addSubItem(itemIndex: number): void {
    const subItems = this.getSubItems(itemIndex);
    subItems.push(this.createSubItem());
  }
}

2. 模板文件（HTML）的对应写法 #

接下来要在模板里正确遍历表单数组，绑定控件，并添加对应的添加按钮：

<form [formGroup]="orderForm">
  <div>
    <label>客户名称:</label>
    <input formControlName="customerName">
  </div>
  <div>
    <label>邮箱:</label>
    <input formControlName="email">
  </div>

  <!-- 遍历一级items数组 -->
  <div formArrayName="items">
    <h3>商品列表</h3>
    <button type="button" (click)="addItem()">添加商品</button>

    <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
      <h4>商品 {{i+1}}</h4>
      <input formControlName="name" placeholder="商品名称">
      <input formControlName="description" placeholder="商品描述">
      <input formControlName="price" placeholder="商品价格">

      <!-- 遍历当前item下的subItems数组 -->
      <div formArrayName="subItems">
        <h5>子商品列表</h5>
        <button type="button" (click)="addSubItem(i)">添加子商品</button>

        <div *ngFor="let subItem of getSubItems(i).controls; let j = index" [formGroupName]="j">
          <input formControlName="subName" placeholder="子商品名称">
          <input formControlName="subDescription" placeholder="子商品描述">
          <input formControlName="subPrice" placeholder="子商品价格">
        </div>
      </div>
    </div>
  </div>
</form>

关键要点说明 #

• 表单数组的获取：通过get方法把FormGroup转成FormArray，我写了items和getSubItems两个快捷方法，方便在组件和模板里使用。
• 添加二级项的逻辑：必须指定父级item的索引，这样才能准确找到对应的subItems数组，再往里push新的二级表单组。
• 模板绑定：使用formArrayName和formGroupName来正确关联表单控件，确保表单值能正确同步。

这样修改后，你就能正常添加一级和二级表单项了，亲测在Angular 5里是完全可行的~

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