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

Question

我在 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);
      }
    }

Answer 1

提示："From what I have read the form group must be declared in the constructor."，将其移动到 OnInit

Answer 2

首先，文件上传不是由 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();
    }

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

应该是这样的：

form:FormGroup;

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

希望这能奏效！！

Answer 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]],

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

Angular 9 file upload not adding file to formgroup

typescript

angular

formgroups