Как я могу собрать все формданные, которые повторяют компоненты на одной странице, в единые формданные в Angular?

Question

У меня есть компонент, который загружает несколько файлов, и этот компонент повторяется на той же странице.Я хочу, чтобы все формданные в единую формданные.Как я могу это сделать?

Компонент HTML

<input type="file" (change)="fileSelect($event, docType)"/>
<input type="file" (change)="fileSelect($event, docType)"/>
<input type="file" (change)="fileSelect($event, docType)"/>

Компонент TS

formData = new FormData();


fileSelect(evt, type) {
    this.formData.append('doc', <File>event.target.files[0], type);
}

КомпонентВключить в parent.html

<div class="block-1">
    <app-file-upload></app-file-upload>
</div>

<div class="block-2">
    <app-file-upload></app-file-upload>
</div>

<div class="block-3">
    <app-file-upload></app-file-upload>
</div>
<button (click)="sendAll()">Send All Files</button>

При отдельной загрузке файлов созданные данные formData применяются только к соответствующему компоненту (собственная область).Как я могу собрать все formData в единую форму dataData при нажатии кнопки отправки.

Answer 1

В родительском компоненте мы можем запросить список дочерних компонентов через @ViewChildren() украшение.

@ViewChildren(AppFileUploadComponent) 
fileUploadComponents: QueryList<AppFileUploadComponent>;

После этого в методе sendAll() мы можем перебрать дочерние компоненты и получить свойство formDataиз экземпляра AppFileUploadComponent и затем можно сохранить до окончательного FormData.

sendAll() {
  let finalFormData = new FormData();
  this.fileUploadComponents.forEach((component) => {
    let formData = component.formData;
    formData.forEach((value, key) => {
      finalFormData.append(key, value);
    })
  });
  // final form Data
  console.log(finalFormData)
}

Полный код доступен в stackblitz .

Answer 2

Я предлагаю вам использовать @Output декоратор в <app-file-upload> компоненте.В первом варианте вы можете сделать:

@Component(...)
export class AppFileUploadComponent{

    @Output('onFileSelect')
    onFileSelect: EventEmitter<any> = new EventEmitter();

    ...

    fileSelect(evt, type) {
        this.onFileSelect.emit(/* Emit the data you want*/);
        // do other magical stuff here

    }
}

А в шаблоне родительского компонента:

<div class="block-3">
    <app-file-upload (onFileSelect)="appendFile($event)"></app-file-upload>
</div>

Parent .ts file

...

appendFile = (data) => {
    /*
      You can append the data to an array
      to use it in sendAll() method
    */    
}