how submit dynamic forms

I have the following problem that I cannot solve

is a form of this type


<button (click)="addform()">agregar formulario</button>
<div class="conten-form">
 <div class="MyForm">

  <input type="text" class="name">

  <input type="text" class="description">

  <div class="img-cont">

   <div class="img">
    <img src="{{img}}">

   <div class="addimg">
     <input type="file" (change)="createimg($event)">

 <div class="AddForm"></div>
 <input type="buttom" value="enviar" (click)="enviarform()">

in TS

img : any; //to show
imgfile : any; //to send it through the form
 let addform = document.querySelectorAll('.AddForm');
 let myform = document.querySelectorAll('.MyForm');
 let cloneform = myform.cloneNode(true);


 this.imgfile =[0];
 const reader = new FileReader();
 reader.onload = () => {
    this.img = reader.result;

 let nombre = document.querySelectorAll(".name");
 let description = document.querySelectorAll(".description");
 let formdata = new FormData;

 //add all inputs class name
 for (let i = 0; i < nombre .length; i++) {
  let stringname = (nombre.[i] as HTMLTextAreaElement).value;

 //add all inputs class description
 for (let i = 0; i < description.length; i++) {
  let stringdescription = (description.[i] as HTMLTextAreaElement).value;
  formdata.append('description',stringdescription );
 //send the form

As you will see, I can add more forms with the add button, cloning the first one, the part of the text inputs I have solved to add as many as I want, but in the part of the inputs for the image I have no idea how to do it, the operation is that after attaching an image to the input, I get a preview image of what I am going to attach in the div.class = img, this makes it only work in the first form, and it no longer works in the forms that I add dynamically, as it could fix this issue? taking into account that I have to send it through the formdata in a single shipment, I thank you in advance.

Leave a Comment