Angular 9 file upload not adding file to formgroup

Question

I have created a form group in my HTML for an Angular 9 application. In this form group, there is an upload feature for a file. The upload is working correctly when the handleFileInput function is called, which I can see through the console log under it. However, the file property is still NULL when I send the form group to my service. I understand that this is due to it being set as NULL in my constructor, but how can I change my code so that the file in the form group is set to the file uploaded? From what I have read the form group must be declared in 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);
      }
    }

Answer 1

Tip: "From what I have read the form group must be declared in the constructor.", move it to OnInit

Answer 2

First, file uploading is not handled by Angular explicitly or by ReactiveForms like this.

To have file upload thing, you could do something like this: in html file:

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

And in 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();
    }

Second,The FormBuilder fb being assigned to your FormGroup form should be done inside ngOnInit() function.

Which should look like this:

form:FormGroup;

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

Hope this would work!!

Answer 3

You need to instantiate a form control inside your form group to hold the reference to the file. Like this:

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

And then when you assign the file:

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

Also, the suggestion to move the form group creation to ngOnInit() is valid, but will not solve your particular issue.

Currently, when you instantiate the form, you are mixing the form builder ( fb ) and instantiating the form controls yourself. Inside a fb.group({ call, values like [] is short hand to instantiate a new form control. So, to consistently use the form builder change the summary and description instantiations to this:

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