angular使用ngzorro组件实现表单动态增减和文件上传

Question

前言：angular14项目，组件ngzorro14，想要实现input框和文件上传同时动态增或减，效果如图所示：

html部分代码如图所示：

接口参数格式如下：

组件地址：https://ng.ant.design/version/14.3.x/components/form/zh

问题描述：
通过用ngzorro的组件可以实现表单动态增减，我需要上传多组数据，在增加多组数据时，文件上传有问题，本该每一组的标题+文件单独为存储为对象传给后端，但是目前上传的文件都合并在一起不分组了，最后一组的标题也会覆盖前面所有的标题，我该如何解决它呢？希望大家能提供一些解决思路，谢谢！

Answer 1

【以下回答由 GPT 生成】

```markdown 解决方案

参考ngzorro组件的文档和示例，可以通过以下步骤来解决这个问题:

1. 安装ngzorro依赖 shell npm install ng-zorro-antd --save

2. 导入ngzorro组件模块 在你的Angular项目的app.module.ts文件中，导入NgZorroAntdModule模块: ```typescript import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({ imports: [ NgZorroAntdModule ], ... }) export class AppModule { } ```

1. 创建表单动态增减组件 在你的Angular项目中，创建一个组件来实现表单的动态增减功能，包括动态的输入框和文件上传组件。可以使用ngzorro的动态表单功能来实现，参考文档链接：https://ng.ant.design/version/14.3.x/components/form/zh。在表单中，每组数据的标题和文件应该是独立的字段，并且需要有唯一的标识符来区分每一组数据。

2. 处理数据上传问题 在你的动态增减表单组件中，当用户点击提交按钮时，使用FormData对象来处理文件上传。对于每一组数据，创建一个新的FormData对象，并将标题和文件分别添加到该对象中。然后，通过HTTP请求将FormData对象发送到后端。确保每个FormData对象都有唯一的标识符来区分每一组数据。

```typescript import { Component } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({ selector: 'app-dynamic-form', templateUrl: './dynamic-form.component.html', styleUrls: ['./dynamic-form.component.css'] }) export class DynamicFormComponent { formDataList: any[] = [];

 constructor(private http: HttpClient) {}

 addFormData() {
   this.formDataList.push({
     id: new Date().getTime(),
     title: '',
     file: null
   });
 }

 removeFormData(formData) {
   this.formDataList = this.formDataList.filter(data => data.id !== formData.id);
 }

 submitForm() {
   this.formDataList.forEach(formData => {
     const body = new FormData();
     body.append('title', formData.title);
     body.append('file', formData.file);

     this.http.post('url', body, { headers: new HttpHeaders() }).subscribe(
       response => {
         // 处理响应
       },
       error => {
         // 处理错误
       }
     );
   });
 }

} ```

1. 在模板中显示动态表单 在动态表单组件的模板文件中，使用ngFor循环来显示每一组数据的标题输入框和文件选择器，并绑定到对应的字段。为每个表单元素添加适当的验证规则和错误提示信息。

```html

<form>

标题 请输入标题 文件

点击选择文件或拖拽文件到此区域

请选择文件 <button>删除</button>

<button>新增</button> <button type="submit">提交</button> </form>

```

1. 处理后端请求 在后端接口中，接收通过FormData对象上传的标题和文件，并进行相应的处理。确保按照唯一标识符来区分每一组数据。根据实际需求，可以将标题和文件保存到数据库或进行其他操作。

希望这个解决方案可以帮助到你，如果还有任何问题，请随时提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^