how submit dynamic forms

by

I have the following problem that I cannot solve

is a form of this type

in HTML

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

  <label>Nombre</label>
  <input type="text" class="name">

  <label>descripcion</label>
  <input type="text" class="description">

  <label>Foto</label>
  <div class="img-cont">

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

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

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

in TS

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

 addform.appendChild(cloneform);
}

createimg(event){
 this.imgfile = event.target.files[0];
 const reader = new FileReader();
 reader.readAsDataURL(this.imgfile);
 reader.onload = () => {
    this.img = reader.result;
 };
}

enviarform(event){
 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;
  formdata.append('name',stringname);
 }

 //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.

41 thoughts on “how submit dynamic forms”

Leave a Comment