Angular 2响应式表单中展示食材对象数组问题求助

看起来你在构建菜谱食材的响应式表单时遇到了几个关键问题，主要集中在表单结构不匹配和DOM结构不符合Angular表单指令要求上。我来帮你一步步修正：

问题分析 #

• FormGroup重复赋值：你在ngOnInit里两次给create_recipe_ingredient_detail_form赋值，第一次的定义会被完全覆盖，而且初始的FormArray结构也不正确。
• 表单控件不完整：你的HTML里用到了ingredient_quantity和ingredient_comment两个表单控件，但在TS的FormGroup构建中只定义了ingredient_name，导致控件找不到绑定项。
• DOM结构错误：你在<tr>里直接嵌套了<div>，这不符合HTML表格的规范，同时Angular的formGroupName指令需要正确的层级关联，这种结构会导致表单绑定失效。

修正方案 #

第一步：修正组件TS代码 #

调整ngOnInit里的表单构建逻辑，确保包含所有需要的控件，并且只初始化一次FormGroup：

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { FormArray, FormGroup, Validators, FormBuilder } from '@angular/forms';
import { Ingredient } from '../ingredient';
import { IngredientDetailService } from '../ingredient-detail.service';

@Component({
  selector: 'app-recipe-ingredients-details',
  templateUrl: './recipe-ingredients-details.component.html',
  styleUrls: ['./recipe-ingredients-details.component.css'],
  providers: [IngredientDetailService]
})
export class RecipeIngredientsDetailsComponent implements OnInit {
  create_recipe_ingredient_detail_form: FormGroup;
  ingredients_arr: Ingredient[] = [];
  @Output() show_read_recipes_event = new EventEmitter();

  constructor(
    private formBuilder: FormBuilder,
    private ingredientDetailService: IngredientDetailService
  ) { }

  @Input() r_id: number;
  @Input() s_ingredients: Ingredient[];

  // 获取FormArray的快捷方法，方便模板调用
  get ingredientDetailsArray(): FormArray {
    return this.create_recipe_ingredient_detail_form.get('s_ingredientDetails') as FormArray;
  }

  ngOnInit() {
    // 正确构建包含所有控件的FormArray
    this.create_recipe_ingredient_detail_form = this.formBuilder.group({
      s_ingredientDetails: this.formBuilder.array(
        this.s_ingredients.map(ingredient => this.formBuilder.group({
          ingredient_id: [ingredient.ingredient_id], // 绑定隐藏字段的控件
          ingredient_name: [ingredient.ingredient_name, Validators.required],
          ingredient_quantity: ['', Validators.required], // 新增数量输入控件
          ingredient_comment: [''] // 新增备注输入控件
        }))
      ),
      r_id: [this.r_id] // 把菜谱ID直接加入表单，无需额外隐藏input
    });
  }

  createRecipeIngredientDetails(): void {
    this.ingredientDetailService.createRecipeIngredientDetails(this.create_recipe_ingredient_detail_form.value)
      .subscribe(
        ingredientDetail => {
          console.log(ingredientDetail);
          this.show_read_recipes_event.emit({ title: "Recipe Ingredients details" });
        },
        error => console.log(error)
      );
  }
}

第二步：修正HTML模板代码 #

调整表格结构，确保表单指令的层级正确，同时去掉不符合规范的DOM嵌套：

<div class="row">
  <div class="col-md-12">
    <form [formGroup]="create_recipe_ingredient_detail_form" (ngSubmit)="createRecipeIngredientDetails()">
      <table class="table table-hover table-responsive table-bordered">
        <thead>
          <tr>
            <th> Ingredient Name </th>
            <th> Quantity </th>
            <th> Comment </th>
          </tr>
        </thead>
        <!-- 把formArrayName绑定到tbody，确保表单层级正确 -->
        <tbody formArrayName="s_ingredientDetails">
          <!-- 遍历FormArray的控件，而非原始数组，确保表单绑定同步 -->
          <tr *ngFor="let ingredientGroup of ingredientDetailsArray.controls; let i=index" [formGroupName]="i">
            <td>
              <div class="form-group">
                <input 
                  name="ingredient_name" 
                  formControlName="ingredient_name" 
                  class="form-control" 
                  readonly 
                />
                <input type="hidden" formControlName="ingredient_id" />
              </div>
            </td>
            <td>
              <div class="form-group">
                <input 
                  type="text" 
                  name="ingredient_qty" 
                  formControlName="ingredient_quantity" 
                  class="form-control" 
                  placeholder="Enter quantity"
                />
              </div>
            </td>
            <td>
              <div class="form-group">
                <input 
                  type="text" 
                  name="ingredient_cmt" 
                  formControlName="ingredient_comment" 
                  class="form-control" 
                  placeholder="Add comment (optional)"
                />
              </div>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">
              <!-- 添加表单验证状态判断，确保验证通过后才能提交 -->
              <button type="submit" class="btn btn-primary" [disabled]="!create_recipe_ingredient_detail_form.valid">
                Create Recipe Ingredient Details
              </button>
            </td>
          </tr>
        </tfoot>
      </table>
    </form>
  </div>
</div>

关键修改说明 #

1. 表单控件完整性：在每个食材的FormGroup里添加了ingredient_id、ingredient_quantity和ingredient_comment，确保和HTML里的formControlName一一对应。
2. DOM结构规范：把formArrayName移到了<tbody>标签上，然后在<tr>上直接使用[formGroupName]="i"，避免了在<tr>里嵌套<div>的错误结构，保证Angular表单指令能正确识别层级。
3. 简化数据传递：把r_id直接加入到顶层FormGroup里，不需要额外的隐藏input，表单提交时会自动包含这个值。
4. 表单验证优化：给提交按钮添加了[disabled]属性，确保表单验证通过后才能提交，提升用户体验。

这样修改后，你的食材数组应该能正确渲染到表单中，并且表单的绑定和提交功能也能正常工作了。

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