Angular FormArray索引无法传入文件输入change事件问题求助

你遇到的bankAccountIndex始终为0的问题，根源在于所有文件输入框的id完全相同！

当你点击上传按钮对应的<label>标签时，浏览器会自动查找页面中第一个匹配for属性值的<input>元素。因为所有label的for都指向同一个file-upload，不管你点哪个扩展面板的上传按钮，实际触发的都是第一个（索引0）的文件输入框的change事件，自然传入的索引一直是0。

修复步骤： #

给每个文件输入框和对应的label设置唯一的关联id，结合循环索引动态生成即可：

修改后的模板代码：

<mat-accordion [togglePosition]="'before'">
 <ng-container *ngFor="let bankFormGroup of bankAccountsFormArray.controls; let bankAccountIndex=index">
 <ng-container [formGroupName]="bankAccountIndex">
 <mat-expansion-panel>
 <span>
 <!-- 动态生成label的for属性，绑定当前索引 -->
 <label for="file-upload-{{bankAccountIndex}}" class="override-margin-bottom" [ngClass]="{'disabled-control': form.disabled}">
 <fa-icon [icon]="faUpload" class="file-upload-icon" size="lg"></fa-icon>
 </label>
 <!-- 动态生成input的id，和label的for一一对应 -->
 <input type="file" id="file-upload-{{bankAccountIndex}}" (change)="onHandleBankLogoUploadEvent($event.target.files, bankAccountIndex)" style="display: none;" />
 <input type="text" #bankLogo formControlName="bankLogoBase64Image" style="display: none;">
 <img [src]="bankLogo.value" *ngIf="bankLogo.value" style="height: 30px;" />
 </span>
 </mat-expansion-panel>
 </ng-container>
 </ng-container>
</mat-accordion>

为什么这样能解决问题？ #

每个扩展面板的label和input都拥有了唯一的关联id，点击对应面板的上传按钮时，浏览器会精准找到当前索引对应的文件输入框，触发它的change事件，此时传入的bankAccountIndex就是当前循环的正确索引值了。

额外优化建议： #

你可以在组件里给bankAccountsFormArray定义一个getter，让模板代码更简洁：

get bankAccountsFormArray(): FormArray {
  return this.userFormGroup.get('bankAccounts') as FormArray;
}

这样模板里直接用bankAccountsFormArray.controls即可，不用每次都写完整的表单路径。

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