如何从Angular可变长度表格中获取每行输入框的值？

针对你遇到的问题，核心是要把文件数据和用户输入的元数据关联起来，下面提供两种简单可行的实现方式：

方法一：包装文件对象（快速实现） #

这种方式无需额外引入表单模块，适合简单场景：

步骤1：修改文件存储结构 #

在组件中，不要直接存储原始File对象，而是把每个文件包装成包含元数据的新对象。比如在文件上传后的回调里处理：

// 组件中定义存储数组
fileEntries: { file: File; title: string }[] = [];

// 文件上传后的处理逻辑（绑定p-fileUpload的onSelect事件）
onFilesSelected(event: any) {
  const selectedFiles = event.files as File[];
  // 将每个文件包装成带title属性的对象
  this.fileEntries = selectedFiles.map(file => ({
    file,
    title: '' // 初始化title为空
  }));
}

步骤2：模板中绑定ngModel #

修改表格模板，遍历fileEntries而非原始files，并把输入框绑定到每个对象的title属性：

<tbody>
  <tr *ngFor="let entry of fileEntries; let ii = index">
    <td>{{ entry.file.name }}</td>    
    <td>{{ entry.file.size }}</td>   
    <td>{{ entry.file.type }}</td>                   
    <td>
      <input type="text" placeholder="Enter Title" [(ngModel)]="entry.title">
    </td>
  </tr>
</tbody>

获取值的方式 #

当需要提交或使用数据时，直接遍历fileEntries即可：

submitData() {
  this.fileEntries.forEach(entry => {
    console.log('文件:', entry.file, '标题:', entry.title);
    // 这里可执行上传文件+提交元数据的逻辑
  });
}

方法二：使用FormArray（表单驱动场景推荐） #

如果你的场景需要表单验证、状态管理等功能，推荐使用Angular响应式表单：

步骤1：初始化表单 #

先导入响应式表单模块，然后在组件中创建包含FormArray的表单：

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

// 组件中定义表单
fileForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.fileForm = this.fb.group({
    files: this.fb.array([]) // 初始化空的FormArray
  });
}

// 快捷获取FormArray的方法
get filesArray(): FormArray {
  return this.fileForm.get('files') as FormArray;
}

步骤2：文件选择后添加表单控件 #

在文件选择回调中，为每个文件添加一个FormGroup到FormArray：

onFilesSelected(event: any) {
  const selectedFiles = event.files as File[];
  // 清空之前的表单控件
  this.filesArray.clear();
  // 为每个文件添加FormGroup，包含file（存储文件对象）和title输入控件
  selectedFiles.forEach(file => {
    const fileGroup = this.fb.group({
      file: [file],
      title: [''] // 初始化title为空
    });
    this.filesArray.push(fileGroup);
  });
}

步骤3：模板中绑定表单控件 #

修改模板，使用表单指令绑定：

<!-- 外层需要绑定formGroup -->
<form [formGroup]="fileForm">
  <tbody formArrayName="files">
    <tr *ngFor="let fileGroup of filesArray.controls; let ii = index" [formGroupName]="ii">
      <td>{{ fileGroup.get('file')?.value.name }}</td>    
      <td>{{ fileGroup.get('file')?.value.size }}</td>   
      <td>{{ fileGroup.get('file')?.value.type }}</td>                   
      <td>
        <input type="text" placeholder="Enter Title" formControlName="title">
      </td>
    </tr>
  </tbody>
</form>

获取值的方式 #

提交时直接获取表单的value即可：

submitForm() {
  const formValue = this.fileForm.value.files;
  console.log('所有文件及元数据:', formValue);
  // formValue结构为 [{ file: File, title: string }, ...]
}

为什么之前的方法无效？ #

你之前尝试直接用ngModel或formControlName绑定原始File对象是因为：

• File是浏览器原生只读对象，直接添加属性不会触发Angular的变更检测
• 没有为每行输入建立一对一的数据关联，导致无法追踪每个输入对应哪个文件

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