I've set up a form group in the HTML of my Angular 9 app that includes an upload feature for files. The file upload works fine when calling the handleFileInput function, as I can confirm from the console log output. However, even though the file gets uploaded successfully, the file property remains NULL when sending the form group to my service. I understand this is because it's initially set as NULL in the constructor, but I'm not sure how to update my code so that the file in the form group reflects the uploaded file. Based on my research, it seems like the form group needs to be defined within the constructor.
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);
}
}