在另一个 FormArray 中嵌套 FormArray

Question

这是我要实现的目标：

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

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>

我 post 以及 Stackblitz link 让您看到功能并更好地理解我想要存档的内容。 StackBlitz Link

提前致谢！

Answer 1

您需要更换模板

set input name and id as "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>

在另一个 FormArray 中嵌套 FormArray

Nested FormArray inside another FormArray

angular

angular-forms

angular-formbuilder

angular9