Angular reactive form array name when pushing data to server

Question

I'm dealing with an "old" issue and wondering if there's something I'm doing wrong. When we have an array in FormData, the name of that array usually goes like field[], where the [] indicates an array and can then be processed by PHP (in my case, Laravel) when the data is sent to the server. But in Angular reactive forms, the array name is mere field and Laravel complains that's not an array.

This is the code I have in Angular:

public form = this.fb.group({
    array_field: this.fb.array([]),
    normal_field: [null],
});

And then in HTML:

<form [formGroup]="form" (ngSubmit)="submit)">
    <mat-form-field>
        <mat-label>Type</mat-label>
        <mat-select multiple="true" [formControl]="form.controls.array_field">
            <mat-option [value]="'reports'">Reports</mat-option>
            <mat-option [value]="'companies'">Companies</mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field>
        <mat-label>Normal</mat-label>
        <mat-select [formControl]="form.controls.normal_field">
            <mat-option [value]="'reports'">Reports</mat-option>
            <mat-option [value]="'companies'">Companies</mat-option>
        </mat-select>
    </mat-form-field>
</form>

The request (FormData) that gets sent to the server looks like:

array_field: reports
array_field: companies
normal_field: null

while it should be:

array_field[]: reports
array_field[]: companies
normal_field: null

And this is what Laravel sees ($request->all()):

array:2 [
  "array_field" => reports,
  "normal_field" => null
]

Notice that there's only one of array_fields while the second one is discharged.

Usually I resort into using alternative code that does not use [formGroup] and [formControl], where I can set the name as I want, but I would prefer to use reactive all the way.

score 0 · Answer 1 · answered Aug 10 '23 at 19:49

0

Try encoding the array property, and then decoding it on the server (json_decode):

formData.append('array_field', JSON.stringify(this.form.value.array_field));

Or since it's a single array, construct it manually:

for (const el of this.form.value.array_field) {
  
  formData.append('array_field[]', el);
}

both cases:

  submit() {
   
    const formData = new FormData();

    for (const el of this.form.value.array_field) {
      
      formData.append('array_field[]', el);
    }

    formData.append('array_field', JSON.stringify(this.form.value.array_field));

    // send data to the server...
  
  }

answered Aug 10 '23 at 19:49

traynor

5,490
3
13
23

That is what I am doing already, but was wondering if there's another solution that is natively supported. – Kristjan O. Aug 11 '23 at 08:19
well, I guess it's rather a matter of multipart format, so other than manual processing, I don't know.. for example: [Manually parse raw multipart/form-data data with PHP](https://stackoverflow.com/questions/5483851/manually-parse-raw-multipart-form-data-data-with-php) – traynor Aug 11 '23 at 17:38

Angular reactive form array name when pushing data to server

1 Answers1