formdata.append not populating my reactive form model.(Angular+)

问题

I am making a multiple upload app. onChange($event) in my ts file I get the array of images but when in my onSubmit() function I try to append these values to my form model it only append the first file except for all files. I am sharing my code with its console.log result. Please help me.

Html code

<form [formGroup]="Files" (ngSubmit)="submitFile()">
  <input type="file" formControlName="file" placeholder="Upload single/Multiple files" multiple (change)="onFileSelect($event)" /><br><br>
  <button type="submit" class="btn btn-success">Submit File</button>
</form>

My .Ts component code

export class UploadComponent implements OnInit {
  Files: FormGroup;
  fileData = [];
  constructor(private _fb: FormBuilder) { this.FormForFiles() }

  ngOnInit(): void {
    //this._flashMessages.show('FlashMessages are working', {cssClass:'alert-success',timeout:5000,});
  }

  onFileSelect(event) {
    for (var i = 0; i < event.target.files.length; i++) {
      this.fileData.push(event.target.files[i]);
    }
    console.log(this.fileData);
  }

  FormForFiles() {
    this.Files = this._fb.group({
      file: ''
    })
  }

  submitFile() {
    const formData = new FormData();
    for (var i = 0; i < this.fileData.length; i++) {
      formData.append('file[]', this.fileData[i]);
    }
    console.log(this.Files);
  }
}

Here is the picture of console.log

来源：https://stackoverflow.com/questions/62722541/formdata-append-not-populating-my-reactive-form-model-angular