使用Angular中的FormArray迭代带有说明的文件上传 [英] Iterate file upload with description using FormArray in Angular

问题描述

我正在尝试创建一个包含n个字段(包括文件上传)的表单.我正在尝试通过单击按钮来迭代文件上传.因此，默认情况下将只有一个文件.因此，当用户单击添加按钮时，应该再添加一组文件上传.因此，我的输出应该类似于n个文件对象的数组.

I'm trying to create a form which will have n fields including file upload. I'm trying to iterate file upload on click of a button. So by default there will be one file. So when user clicks on add button, one more set of file upload should be added.So my output should be something like array of n file objects.

文件上传的预期输出:

[
 {
  file: image1,
  fileDescription: file1
 },
 {
  file: image2,
  fileDescription: my second image
 }
]

已删除的文件无法再次上传，因为我已使用@ViewChild重置value = ''，然后可以再次选择已删除的文件.这是从 Prashant

Deleted file is not available for upload again for that I have used @ViewChild to reset the value = '', then you can select the deleted file again. This was added from one of the answers by Prashant

注意:以上所有内容均应经过验证.到目前为止，这是我尝试过的有效的 stackblitz .

Note: All the above should have validation. Here is the working stackblitz so far I have tried.

推荐答案

您必须使用 FormArray ，并在每次用户单击添加文件上载按钮"时按下一个新值.

You have to use a FormArray, and push a new value each time the user click on the "add file upload button".

您可以在此处找到一个有效的示例: https://stackblitz.com/edit/angular-pg1szu

You can find a working example here: https://stackblitz.com/edit/angular-pg1szu

这篇关于使用Angular中的FormArray迭代带有说明的文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！