Angular模板驱动表单无法捕获动态添加控件数据求助

模板驱动表单仅会自动识别静态声明的表单控件，通过ng-template动态渲染的输入框，Angular无法自动将其注册到父表单实例中，因此提交时无法捕获这些动态控件的值。

核心是确保动态输入框具备唯一的name属性，并正确绑定ngModel，让Angular能将其纳入表单管理。

1. 组件类代码 #

import { Component, ViewChild, NgForm } from '@angular/core';

@Component({
  selector: 'app-category-editor',
  templateUrl: './category-editor.component.html'
})
export class CategoryEditorComponent {
  username = '';
  // 初始化分类数据
  categories = [
    { id: 1, title: '默认分类1' },
    { id: 2, title: '默认分类2' }
  ];
  // 获取表单引用，用于提交时获取完整数据
  @ViewChild('editForm') editForm!: NgForm;

  onSubmit() {
    if (this.editForm.valid) {
      console.log('完整表单数据:', this.editForm.value);
      // 这里可以拿到username和所有分类的输入值
    }
  }

  onCancel() {
    this.editForm.resetForm();
    // 如需恢复原始分类标题，可重新从数据源加载
  }
}

2. 模板代码（ng-template版本） #

<form #editForm="ngForm" (ngSubmit)="onSubmit()">
  <!-- 测试用静态输入框 -->
  <div>
    <label>用户名:</label>
    <input type="text" name="username" [(ngModel)]="username" required>
  </div>

  <!-- 定义分类输入框模板 -->
  <ng-template #categoryInputTpl let-category="category">
    <div>
      <label>分类名称:</label>
      <!-- 关键：用分类ID生成唯一name，避免重复 -->
      <input 
        type="text" 
        [name]="'category_' + category.id" 
        [(ngModel)]="category.title" 
        required>
    </div>
  </ng-template>

  <!-- 循环渲染动态输入框 -->
  <ng-container *ngFor="let cat of categories">
    <ng-container 
      *ngTemplateOutlet="categoryInputTpl; context: {category: cat}">
    </ng-container>
  </ng-container>

  <button type="submit">提交</button>
  <button type="button" (click)="onCancel()">取消</button>
</form>

关键注意点 #

• 唯一name属性：动态生成的每个输入框必须有独一无二的name，这里用category.id拼接确保不会重复，Angular通过name识别表单控件。
• 正确绑定ngModel：将输入框的ngModel绑定到分类对象的title属性，这样输入值会实时同步到组件的categories数组，同时表单提交时editForm.value会包含所有动态控件的数据。

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