为什么提交表单时我的 FormData 为空？

Question

我的 formData 使用响应式表单的输入：categoryForm。我必须这样做才能上传我的数据。但是当我提交我的 formData 和 console.log 时，我得到的只是：FormData {} 所以是一个空表单。但我不知道为什么，因为我用this.categoryForm.get('name').value 获取每个数据的值 我的响应式表单实际上是在接收数据，并且表单有所有数据，所以问题是 formData 没有获取数据。

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

为什么不使用 categoryForm 本身来获取值，像这样：

const value = this.categoryForm.value