如何将同一页面上重复组件的所有表单数据收集到 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 收集到单个 formData 中。

Answer 1

我建议你在 <app-file-upload> 组件中使用 @Output 装饰器。在第一个选项中，您可以这样做：

@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>

父 .ts 文件

...

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

Answer 2

在父组件中我们可以通过@ViewChildren()修饰查询子组件列表

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

在 sendAll() 方法中我们可以遍历子组件并可以从 AppFileUploadComponent 实例中获取 formData 属性然后可以存储到最终 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。

如何将同一页面上重复组件的所有表单数据收集到 Angular 中的单个表单数据中？

How can I collect all formdata which repeating components on the same page into a single formdata in Angular?

file-upload

append

form-data

angular