Search code examples
angularformsngfor

Angular - How to bind textarea input to image in the loop using form


I have a simple app where user can upload one or multiple images. In preview mode, user has to add description to each of the image and then he can upload the images with pictures. They are then added to the end of the existing pictures.

Here is the link to the code: https://stackblitz.com/edit/angular-12-multiple-image-upload-preview-arzita?file=src/app/components/upload-images/upload-images.component.html

My problem though is that when I upload, the first occurance of the textbox input is shown with each picture. Do you have any idea how to have for each picture it´s own description?

Thank you.

What I tried: https://stackblitz.com/edit/angular-12-multiple-image-upload-preview-arzita?file=src/app/components/upload-images/upload-images.component.html

What am I expecting: I want for each picture it´s onw unique description.


Solution

  • That is happening becouse you are pushing the wrong value of array.

    Form is always updated at her own. Always check consol logs.

         this.uploadService.data.push(<Picture>{
            imageSrc: this.previews[idx],
            imageDesc: this.descriptionForm.get('description').value,
          });