CODEWITHSUNDEEP
angulartypescript
Matelutex
Matelutex

Reputation: 2220

Angular8 - get values from FormData

I'd like to get values from my FormData object:

  1. My save() method in my popup window, where I can upload a file:
    save() {
          this.frameworkEdited.next(this.frameworkPayload());
      }
  1. Method that creates FormData object with payload and choosed file:
     //this.fileToUpload is of type File
      private frameworkPayload(): FormData {
            const formData = new FormData();
            formData.append('payload', JSON.stringify(this.getFrameworkPayload()));
            if (!isNil(this.fileToUpload)) {
              formData.append('file', this.fileToUpload, this.fileToUpload.name);
            }
            return formData;
  1. getFrameworkPayload() method:
private getFrameworkPayload(): IFrameworkPayload {
    const formValues = Object.assign({}, this.frameworkForm.value);
    return {
      id: formValues.id,
      name: formValues.name,
      active: formValues.active,
      reviewRequired: formValues.reviewRequired,
      parsingRequired: formValues.parsingRequired,
      frameworkSortingType: {
        id: formValues.id,
        environmentalSortingType: formValues.frameworkSortingType.environmentalSortingType,
        socialSortingType: formValues.frameworkSortingType.socialSortingType,
        governanceSortingType: formValues.frameworkSortingType.governanceSortingType,
      },
    } as IFrameworkPayload;
  }

IN the Observable method I have to pass to the service method editFramework also framework ID, but I can't pass 2 parameters in

frameworkEdited(editedFramework: FormData): void {
 this.service.editFramework(editedFramework).pipe(

//HERE I NEED ID from FormData
 editFramework(payload: FormData): Observable<IFramework> {
    return this.http.put<IFramework>(`${this.url}/${payload['id']}`, payload);
  }

SO I need to get ID from my payload: FormData. I tried payload.getAll('payload') but then I get a String with key-values... Maybe should I SOMEHOW cast this String into IFrameworkPayload and get get ID???

Upvotes: 0

Views: 591

Answers (1)

RonCG
RonCG

Reputation: 369

The best option I can think of is to refactor your editFramework() method, so it receives the payload, and then create the FormData inside the method, as follows:

 editFramework(payload: IFrameworkPayload): Observable<IFramework> {
    const formData = new FormData();
    formData.append('payload', JSON.stringify(payload);
    if (!isNil(this.fileToUpload)) {
       formData.append('file', this.fileToUpload, this.fileToUpload.name);
    }

    return this.http.put<IFramework>(`${this.url}/${payload['id']}`, formData);
  }

Then, you just have to change your save and frameworkEdited methods, as follows:

 save() {
      this.frameworkEdited.next(this.getFrameworkPayload());
 }

 frameworkEdited(payload: IFrameworkPayload): void {
      this.service.editFramework(payload).pipe(

If, for any reason, you don't like this approach, you can use FormData.values() method, to obtain the values. You will need to reconvert your data from JSON to IFrameworkPayload, using JSON.parse(). Though, this seems like unnecessary work.

Upvotes: 1

Related Questions