title: How can I collect all formdata which repeating components on the same page into a single formdata in Angular?
body: <p>I have a component that upload multiple files and this component is repeated on the same page. I want to get all formdata into to the single formdata. How can I do this?</p>
  
  <p><strong>Component HTML</strong></p>
  
  <pre><code>&lt;input type="file" (change)="fileSelect($event, docType)"/&gt;
  &lt;input type="file" (change)="fileSelect($event, docType)"/&gt;
  &lt;input type="file" (change)="fileSelect($event, docType)"/&gt;
  </code></pre>
  
  <p><strong>Component TS</strong></p>
  
  <pre><code>formData = new FormData();
  
  
  fileSelect(evt, type) {
      this.formData.append('doc', &lt;File&gt;event.target.files[0], type);
  }
  </code></pre>
  
  <p><strong>Component Include in parent.html</strong></p>
  
  <pre><code>&lt;div class="block-1"&gt;
      &lt;app-file-upload&gt;&lt;/app-file-upload&gt;
  &lt;/div&gt;
  
  &lt;div class="block-2"&gt;
      &lt;app-file-upload&gt;&lt;/app-file-upload&gt;
  &lt;/div&gt;
  
  &lt;div class="block-3"&gt;
      &lt;app-file-upload&gt;&lt;/app-file-upload&gt;
  &lt;/div&gt;
  &lt;button (click)="sendAll()"&gt;Send All Files&lt;/button&gt;
  </code></pre>
  
  <p>When upload files separately, created formData only applied to the relevant component (own scope). How can I collect all formData into the single formData when click the send button.</p>