Angular 9文件上传未将文件添加到表单组答案

【问题标题】：Angular 9 file upload not adding file to formgroupAngular 9文件上传未将文件添加到表单组
【发布时间】：2020-04-30 05:14:37
【问题描述】：

我在我的 HTML 中为 Angular 9 应用程序创建了一个表单组。在这个表单组中，有一个文件的上传功能。调用handleFileInput函数时上传正常，我可以通过它下面的控制台日志看到。但是，当我将表单组发送到我的服务时，文件属性仍然为 NULL。我知道这是因为它在我的构造函数中设置为 NULL，但是如何更改我的代码以便将表单组中的文件设置为上传的文件？根据我的阅读，表单组必须在构造函数中声明。

export class HelpComponent implements OnInit {

  form: FormGroup;
  srcPage = 'Test';
  fileToUpload: File = null;

  constructor(public fb: FormBuilder, private messageService: MessageService,
              public exportFilesService: ExportFilesService) {

  this.form = this.fb.group({
        summary: new FormControl('', [Validators.required]),
        description: new FormControl('', [Validators.required]),
        isurgent: [false],
        file: this.fileToUpload
      });
   }

  ngOnInit() {
  }

  handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
    console.log(this.fileToUpload);
  }

  submitForm() {
      this.messageService.sendSupportRequest(this.form.get('summary').value , 
      this.form.get('description').value, this.form.get('isurgent').value, 
      this.srcPage, this.form.get('file').value);
      }
    }

【问题讨论】：

标签： angular typescript formgroups

【解决方案1】：

首先，文件上传不是由 Angular 或像这样的 ReactiveForms 显式处理的。

要上传文件，你可以这样做：在html 文件中：

<input type="file" (change)="handleFile($event)" />

在ts:

handleFile(event) {
        const formData: FormData = new FormData();

        const files=event.target.files;
        files.foreach(file=>{
            formData.append(file);
        })

        this.form.patchValue({file:formData});
        this.form.updateValueAndValidity();
    }

其次，FormBuilder fb 被分配给您的 FormGroup form 应该在 ngOnInit() 函数内完成。

应该是这样的：

form:FormGroup;

ngOnInit(){
this.form = this.fb.group({
        summary: new ['', [Validators.required]],
        description: ['', [Validators.required]],
        isurgent: [false],
        file: ['']
      });
   }
}

希望这会奏效！

【讨论】：

【解决方案2】：

提示：“根据我的阅读，表单组必须在构造函数中声明。”，将其移至 OnInit

【讨论】：

【解决方案3】：

您需要在表单组中实例化一个表单控件来保存对文件的引用。像这样：

this.form = this.fb.group({
        summary: new FormControl('', [Validators.required]),
        description: new FormControl('', [Validators.required]),
        isurgent: [false],
        file: []
      });

然后当你分配文件时：

handleFileInput(files: FileList) {
    this.form.patchValue({ file: files.item(0) });
  }

此外，将表单组创建移动到 ngOnInit() 的建议是有效的，但不会解决您的特定问题。

目前，当您实例化表单时，您正在混合表单构建器 (fb) 并自己实例化表单控件。在fb.group({ 调用中，[] 之类的值是实例化新表单控件的简写。因此，为了始终如一地使用表单构建器，请将 summary 和 description 实例化更改为：

summary: ['', [Validators.required]],
description: ['', [Validators.required]],

【讨论】：

我收到错误“files.item is not a function”这个解决方案
是的，我故意这样保留它，因为它是您的代码的一部分，与问题无关。我假设您没有直接传递事件，而是将$event.target.files 作为handleFileInput 的参数。其他人与我同时回答并修复了该部分。