Why is my FormData empty when submitting the form?

Question

My formData consumes the inputs of a reactive form: categoryForm . I have to do that in order to upload my data.But when I submit my formData and console.log it, I get just: FormData {} so an empty form. But I don't know why since im getting the value of each data with this.categoryForm.get('name').value My reactive form is actually receiving the data and the form has all the data, so the problem is that formData does not get the data.

html:

<form [formGroup]="categoryForm">
                    <ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
                        <ion-icon name="eye"></ion-icon>
                      <ion-checkbox formControlName="lock"></ion-checkbox>              

<div> 
    <ion-item>
      <ion-input [disabled]="tagList?.length > 0" mode="md" formControlName="category" clearInput="true" placeholder="Tag" name="tagValue"></ion-input>
      <ion-button (click)="addTag()" [disabled]="!categoryForm.valid || tagList?.length > 0"  item-right icon-only>
      <ion-icon name="checkmark"></ion-icon>
    </ion-button>
    </ion-item>
</div>

</form>

</ion-content>

<ion-footer">

        <ion-button 
        [disabled]="!tagList?.length > 0" 
        (click)="apiSubmit()"
        expand="block" 
        color="secondary" 
        fill="solid"
        >POST</ion-button>
  </ion-footer>

ts:

     ngOnInit() {

  this.storage.get('image_data').then((imageFile) => {
      console.log(imageFile)
      this.categoryForm.patchValue({
        'image': this.storage.get('image_data')
      });

      this.storage.get('when').then((whenData) => {
        this.categoryForm.patchValue({
          'when': this.storage.get('when')
        });
      });
    });

        this.categoryForm = new FormGroup({

          'lock': new FormControl(true),


          'category': new FormControl('', Validators.compose([
            Validators.maxLength(25),
            Validators.minLength(1),
            Validators.required
          ])),

          'image': new FormControl(null),
          'when': new FormControl(null),
        });

    }

    apiSubmit() {
      const formData = new FormData();
      formData.append('lock', this.categoryForm.get('lock').value);
      formData.append('category', this.categoryForm.get('category').value);
      formData.append('image', this.categoryForm.get('image').value);
      formData.append('when', this.categoryForm.get('when').value);
      console.log(formData);

      this.http.post<any>(`{this.url}`, formData, httpOptions).subscribe(
        (res) => console.log(res),
        (err) => console.log(err)
      );
    }

Answer 1

why not use categoryForm itself to get the value, like this:

const value = this.categoryForm.value