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

首先，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();
}

其次，分配给FormGroupform的FormBuilderfb应该在ngOnInit()函数内完成。

应该是这样的：

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

希望这能奏效！！

Answer 2

提示："根据我所读到的内容，表单组必须在构造函数中声明。"，将其移动到OnInit

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