如何在 FormGroup 中附加多个图像答案

【问题标题】：How to append multiple images in FormGroup如何在 FormGroup 中附加多个图像
【发布时间】：2022-08-17 19:49:18
【问题描述】：

在我的 Angular 应用程序中，我创建了一个图片库。我可以将多个图像一起插入的地方。我正在使用FormGroup 来获取表单的值。我完成了所有其他formControls 并停留在这里我也有append 的图像到我的fromControl。

当我console.log(this.images) 时，我可以看到所有images 数据，但是如果我在挑选图像后尝试console.log(this.gallery.value)。我只能看到一张图片。就像{images: File} 只存在一个文件。我努力了

 this.gallery = new FormGroup({
      images : new FormControl([this.images])
    })

这是我的.ts 文件。

 images : any = [];
 gallery : FormGroup;

 onGalleryPicked(event : Event){
    const file = (event.target as HTMLInputElement).files[0];
    this.gallery.patchValue({images : file});
    this.gallery.get(\'images\').updateValueAndValidity();
    // console.log(file);
    // console.log(this.images);
    const reader = new FileReader();
    reader.onload = (e: any) =>{
        if(this.images.length < 4){
          this.images.push(e.target.result);
        }
    }
    reader.readAsDataURL(file)
   }
  removeImg(image : any){
    this.images = this.images.filter((a)=>a !== image)
  }

  this.gallery = new FormGroup({
      images : new FormControl()
    })

这是template：

<form [formGroup]=\"gallery\">
            <!-- form image -->
            <div class=\"product-gallery\">
              <div class=\"product-gallery\">
                <button (click)=\"galleryPick.click()\" mat-button>
                  Upload Images*
                </button>
                <input type=\"file\" #galleryPick (change)=\"onGalleryPicked($event)\" />
              </div>
              <div class=\"gallery-images\">
                <div class=\"small-images\" *ngFor=\"let image of images\">
                  <img [src]=\"image\" alt=\"\">
                  <span><button (click)=\"removeImg(image)\">x</button></span>
                </div>
              </div>
            </div>
            <div>
              <button mat-button matStepperPrevious>Back</button>
              <button mat-flat-button matStepperNext>Next</button>
            </div>
   </form>

现在我的问题是我想在formControl 中附加this.images

标签： node.js angular

【解决方案1】：

我认为你应该使用表单数组形式的概念来做到这一点。您可以使用表单数组来创建表单数组并在每个表单中包含一个图像。

【讨论】：

您能否演示在这种情况下我将如何实现FormArray？