Angular如何将多个子组件表单输入绑定到父组件定义的数组

这个功能完全可以实现，不需要额外找替代方案，用Angular原生的组件交互+表单绑定能力就能搞定，你原来代码里直接操作nativeElement删除DOM的写法有问题，会导致视图和组件状态不同步、内存泄漏，需要改掉。

1. 公共配置前置要求 #

首先要在你当前组件所属的NgModule中导入FormsModule，不然模板里的ngModel双向绑定无法生效。

2. 改造子组件 ItemInputComponent #

子组件不要自己操作DOM删除，也不需要自己持有最终数据，只需要做三件事：

• 绑定自身三个输入框的值
• 输入内容变化时，把组装好的Item对象通过自定义事件抛给父组件
• 点击删除按钮时，把删除请求通过事件抛给父组件，由父组件统一操作数据

修改后的 item-input-component.ts #

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { Item } from 'src/app/models/item';

@Component({
  selector: 'app-item-input',
  templateUrl: './item-input.component.html',
  styleUrls: ['./item-input.component.css']
})
export class ItemInputComponent implements OnInit {
  // 接收父组件传的当前条目唯一ID，用来给父组件定位是哪个子组件传的值
  @Input() itemId!: number;

  // 输入框绑定值
  itemName: string = '';
  quantity: number | null = null;
  price: number | null = null;

  // 值变化事件，向外抛当前条目ID+组装好的Item对象
  @Output() itemValueChange = new EventEmitter<{id: number, value: Item}>();
  // 删除事件，向外抛当前条目ID
  @Output() itemRemove = new EventEmitter<number>();

  ngOnInit(): void {}

  // 任意输入框内容变化时触发，校验字段完整性后抛值给父组件
  onInputChange() {
    if (this.itemName.trim() && this.quantity !== null && this.price !== null) {
      this.itemValueChange.emit({
        id: this.itemId,
        value: {
          itemName: this.itemName.trim(),
          quantity: this.quantity,
          price: this.price
        }
      });
    }
  }

  // 点击删除按钮只抛事件，不直接操作DOM
  onDeleteClick() {
    this.itemRemove.emit(this.itemId);
  }
}

修改后的 item-input-component.html #

给输入框加双向绑定和输入事件监听，原来的text类型的数量、单价输入改成number更合理：

<div class="mb-3 row item">
  <div class="col">
      <label for="item-name-{{itemId}}" class="form-label">Item Name</label>
      <input 
        type="text" 
        id="item-name-{{itemId}}" 
        class="form-control"
        [(ngModel)]="itemName"
        (input)="onInputChange()"
      >
  </div>

  <div class="col">
      <label for="quantity-{{itemId}}" class="form-label">Quantity</label>
      <input 
        type="number" 
        id="quantity-{{itemId}}" 
        class="form-control"
        [(ngModel)]="quantity"
        (input)="onInputChange()"
        min="1"
      >
  </div>

  <div class="col">
      <label for="price-{{itemId}}" class="form-label">Price</label>
      <input 
        type="number" 
        id="price-{{itemId}}" 
        class="form-control"
        [(ngModel)]="price"
        (input)="onInputChange()"
        min="0"
        step="0.01"
      >
  </div>

  <button type="button" (click)="onDeleteClick()">Delete Item</button>
</div>

注意：循环渲染多个输入框时，label的for属性和input的id要加唯一标识，不然多个相同id会导致点击label无法聚焦对应输入框的问题。

3. 改造父组件 AddInvoiceComponent #

父组件作为数据的持有方，统一维护itemList和渲染列表，所有增删操作都通过修改自身属性驱动，让Angular自动更新视图：

修改后的 add-invoice-component.ts #

import { Component, OnInit } from '@angular/core';
import { Item } from 'src/app/models/item';

@Component({
  selector: 'app-add-invoice',
  templateUrl: './add-invoice.component.html',
  styleUrls: ['./add-invoice.component.css']
})
export class AddInvoiceComponent implements OnInit {
  description!: string;
  invoiceDate!: Date;
  clientName!: string;
  clientAddress!: string;
  // 初始化存储条目的数组
  itemList: Item[] = [];
  // 存储当前渲染的所有条目ID，不再用索引，避免删中间项时索引错乱
  activeItemIds: number[] = [0, 1];
  // 自增ID，保证每个新增条目ID唯一
  nextItemId = 2;

  ngOnInit(): void {}

  // 新增条目
  addNewItem() {
    this.activeItemIds.push(this.nextItemId);
    this.nextItemId++;
  }

  // 接收子组件传的值，更新itemList
  updateItem(payload: {id: number, value: Item}) {
    const existIndex = this.itemList.findIndex((item: any) => item._trackId === payload.id);
    if (existIndex > -1) {
      // 已有条目就更新值
      this.itemList[existIndex] = {...payload.value, _trackId: payload.id};
    } else {
      // 新条目就加入数组，加内部追踪ID用来和子组件对应
      this.itemList.push({...payload.value, _trackId: payload.id} as any);
    }
  }

  // 处理子组件的删除请求
  deleteItem(itemId: number) {
    // 从渲染列表中移除对应ID
    this.activeItemIds = this.activeItemIds.filter(id => id !== itemId);
    // 从数据列表中移除对应条目
    this.itemList = this.itemList.filter((item: any) => item._trackId !== itemId);
  }
}

修改后的 add-invoice-component.html #

循环渲染子组件时传入ID，监听子组件抛出的两个事件：

<form> 
    <div>
        <h2>Items</h2>
        <app-item-input 
          *ngFor="let id of activeItemIds"
          [itemId]="id"
          (itemValueChange)="updateItem($event)"
          (itemRemove)="deleteItem($event)"
        ></app-item-input>
        <button type="button" (click)="addNewItem()">Add Item</button>
    </div>
</form>

注意：按钮要加type="button"，不然在form标签里默认是submit类型，点击会触发表单提交刷新页面。

如果后续需要加复杂的表单校验、跨字段校验、错误提示统一管理，可以换成Angular响应式表单方案：在父组件创建根FormGroup，items字段用FormArray类型，每个子组件接收对应索引的FormGroup做绑定，不需要手动做事件传值，表单状态会自动同步，适合更复杂的业务场景。

内容的提问来源于stack exchange，提问作者Altaïr