angular - 在另一个 FormArray 中嵌套 FormArray

Question

这是我想要完成的:

在一个页面中，用户将能够上传他们对某些外汇对的保护。因此，用户可以选择不同的时间范围来上传他们的图像分析。我的表格很简单:

dataForm: FormGroup;
this.dataForm = this.builder.group({
      nombre: ['', [Validators.required]],
      analisis: this.builder.array([ this.createItems() ])
    });

为了创建分析数组，我使用以下代码:

createItems() {
    return this.builder.group({
      temporalidad: [],
      descripcion: [],
      fileImg: this.builder.array([])
    });

  }

一切正常，直到我必须为我创建的不同分析选择图像。如果我只是选择添加另一张分析卡[分析1＆分析2]，如果我使用按钮加载图像进行分析一，这在分析1卡中正确显示......但是当我选择分析图像时2、这个显示在分析1卡的不在分析2卡的

这是我加载图像的代码

fileUploads(evt: any, index: any) {
    const files = evt.target.files;
    const control = this.dataForm.controls.analisis['controls'][index].controls['fileImg'].controls;
    for (let i = 0; i < files.length; i++) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const base64img = reader.result + '';
        control.push(this.builder.control(base64img));
      };
      reader.readAsDataURL(files[i]);
    }
    evt.srcElement.value = null;
  }

以及用于显示图像的 HTML

<div>
                                <label for="file-upload" class="custom-file-upload">
                                    <mat-icon class="icon">add_a_photo</mat-icon> Imagen del análisis
                                </label>
                                <input id="file-upload" name="file" type="file" (change)="fileUploads($event, i)" accept="image/png,image/jpeg,image/jpg"/>
                            </div>
                            <figure *ngFor="let image of dataForm.controls.analisis['controls'][i].controls['fileImg'].controls; let j = index" style="margin-left: 0px;">
                                <img [src]="image.value" class="proyection-image" />
                            </figure>

我还发布了 Stackblitz 链接，供您查看功能并更好地了解我想要存档的内容。
StackBlitz Link

提前致谢!

Answer 1

你需要改变模板

将输入名称和 id 设置为“file-upload{{i}}”，在 ngFor 内部需要设置唯一名称。可能有various bugs

example

// html
<div>
  <label for="file-upload{{i}}" class="custom-file-upload">
    <mat-icon class="icon">add_a_photo</mat-icon> Imagen del análisis
  </label>
  <input id="file-upload{{i}}" 
    name="file-upload{{i}}" type="file" 
    (change)="fileUploads($event, i);"
    accept="image/png,image/jpeg,image/jpg"/>
</div>