Angular 6中获取动态控件选中值及提交时获取文件详情

当然可以在提交时遍历控件来获取对应的值！你的思路方向是对的，之前没成功大概率是因为没有把下拉框的选中状态和表单组做绑定，同时文件信息的存储没有和每个控件组的索引对应上。下面给你具体的实现方案：

步骤1：修改HTML模板，绑定表单控件 #

首先要把下拉框和表单组的formControl绑定，这样表单组会自动维护下拉框的选中值；同时给每个文件输入框加索引后缀避免重复ID问题，确保文件信息和控件组一一对应：

<div [formGroup]="myForm">
  <div *ngFor="let item of controls; let pointIndex=index" [formGroupName]="pointIndex">
    <label> Selling Point: 
      <!-- 绑定formControlName，让表单组跟踪下拉框选中值 -->
      <select formControlName="dropdown">
        <option *ngFor="res of objArrValues" [value]="res.value">{{res.name}}</option>
      </select>
    </label>
    <label for="file-{{pointIndex}}">Choose File</label>
    <!-- 给每个文件输入框添加索引后缀，避免ID重复 -->
    <input type="file" id="file-{{pointIndex}}" (change)="handleFileInput($event.target.files, pointIndex)">
    <button type="button" (click)="deleteSellingPoint(pointIndex)">Delete</button>
  </div>
  <button type="button" (click)="getDetails()">Add</button>
</div>

步骤2：完善组件TypeScript逻辑 #

在组件里，我们需要用FormArray管理动态控件组，同时维护一个数组存储每个索引对应的文件信息，最后在提交方法里遍历组装数据：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  myForm: FormGroup;
  objArrValues = [/* 你的下拉选项数据，比如 {value: '1', name: 'Point 1'} */];
  // 存储每个控件组对应的选中文件
  selectedFiles: (File | null)[] = [];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单，用FormArray管理动态的卖点控件组
    this.myForm = this.fb.group({
      sellingPoints: this.fb.array([this.createSellingPointGroup()])
    });
  }

  // 获取FormArray的controls，供模板遍历使用
  get controls() {
    return (this.myForm.get('sellingPoints') as FormArray).controls;
  }

  // 创建单个卖点的表单组
  createSellingPointGroup(): FormGroup {
    return this.fb.group({
      dropdown: [''] // 初始化下拉框控件
    });
  }

  // 处理文件上传，将文件存入对应索引的位置
  handleFileInput(files: FileList | null, pointIndex: number): void {
    if (files && files.length > 0) {
      this.selectedFiles[pointIndex] = files[0]; // 这里默认单文件上传，多选可改为数组存储
    } else {
      this.selectedFiles[pointIndex] = null;
    }
  }

  // 删除卖点控件组，同时删除对应位置的文件记录
  deleteSellingPoint(pointIndex: number): void {
    const sellingPoints = this.myForm.get('sellingPoints') as FormArray;
    sellingPoints.removeAt(pointIndex);
    this.selectedFiles.splice(pointIndex, 1);
  }

  // 提交时遍历所有控件组，获取下拉值和文件详情
  getDetails(): void {
    const sellingPoints = this.myForm.get('sellingPoints') as FormArray;
    const result = [];

    // 遍历每个表单组，组装数据
    for (let i = 0; i < sellingPoints.length; i++) {
      const group = sellingPoints.at(i);
      const dropdownValue = group.get('dropdown')?.value;
      const selectedFile = this.selectedFiles[i];

      result.push({
        id: dropdownValue,
        file: selectedFile
      });
    }

    // 这里可以对结果进行后续处理，比如打印、提交后端等
    console.log('所有卖点详情:', result);
  }
}

关键说明 #

1. 表单绑定优势：通过formControlName绑定下拉框，不需要额外监听change事件，表单组会自动同步选中值，避免手动维护状态的麻烦。
2. 文件索引对应：用selectedFiles数组和控件组索引一一绑定，确保遍历的时候能精准拿到每组对应的文件。
3. 遍历逻辑清晰：直接遍历FormArray的每个表单组，结合文件数组的对应索引，就能轻松组装出你需要的结构化数据。

这样修改后，点击Add按钮时就能准确获取每一组的下拉选中值和文件详情了！

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