Receive [object Object] when trying to log Reactive Form on Angular - arrays

Question

I am currently working in a component which consists in a reactive form, and every field in the form returns an array of objects, and thet array of objects is different for every field. This is important because, when the form is filled, I need to create an URL in order to call an API with that data.
I have already done 2 methods that generate that URL, but they only work when the input is a text field, or when the data for that field is another type other than an array of objects. But all my inputs are multiselect using PrimeNG, so they return an array of objects. I show one input, but all of them are similar.
component.html
<span>Field 1: </span>
<span>
<p-multiSelect
[options]="options"
defaultLabel="Placeholder"
optionLabel="optionLabel"
display="chip"
formControlName="formControlName1"
>
</p-multiSelect>
</span>
The previous code returns this:
formControlName1: Array(2)
0: {foo: 'bar 1'}
1: {foo: 'bar 2'}
length: 2
[[Prototype]]: Array(0)
What I have tried so far are those two methods:
component.ts
onSubmit(form: any) {
const tree = this.router.createUrlTree([], { queryParams: form });
console.log(this.serializer.serialize(tree));
}
generateUrl() {
for (const control in this.myForm.controls) {
const val = this.myForm.controls[control].value;
if (val !== null) {
this.stringFinal += `${control}=${val}&`;
}
}
console.log(this.stringFinal);
}
Those two methods return mostly the same, but as I sais previously, they work when the input data is a text, not an array.
So my question is, how to access the the array of objects, and obtain every single data for the foo field.

Answer 1

I managed to make it work:
generateUrl() {
for (const control in this.myForm.controls) {
const val = this.myForm.controls[control].value;
if (val !== null) {
val.forEach((element: any) => {
this.stringFinal += `${control}=${element}&`;
});
}
}
console.log(this.stringFinal);
}