Angular how to push nested reactive form json ids in formArray - json

Question

I want to submit an album gallery with eventTitle and multiple images. I am able to upload multiple images with eventTitle. It might be silly ask but I am new in angular and this is my first project on this. Stuck with this problem. Any reference/document would a big help.
While submitting the form, I just need to pass array of ids of images and eventTitle. My json looks like below:
{
"eventTitle": "Event to be celebrate - Happy New Year..!!",
"image": [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
}
]
}
Problem is here that I am not able to push the array of ids. Only last uploaded image's id is getting push. notable to loop the ids and push into formArray. Can someone please help me how can loop the ids of all uploaded images?
// my Gallery component ts file:
constructor(private fb: FormBuilder,
private http: HttpClient,
private gallaryService: GallaryService,
private fileService: FileService,
private renderer: Renderer2) {
this.gallaryForm = this.fb.group({
eventTitle: [''],
image: this.fb.array([])
});
this.addGallaryImages();
}
ngOnInit() {
}
initSocialProfiles() {
return this.fb.group({
id: ['']
});
}
addGallaryImages() {
const control = this.gallaryForm.controls.image as FormArray; // how to loop it ids of array
const addrCtrl = this.initSocialProfiles();
control.push(addrCtrl);
console.log(addrCtrl);
}
gallaryFormSubmit() { //submitting the form
if (this.gallaryForm.valid) {
const gallaryFormData = this.gallaryForm.value;
gallaryFormData.image = [];
gallaryFormData.image[0] = {};
gallaryFormData.image[0].id = this.imageId;
this.gallaryService.saveGallaryForm(gallaryFormData).subscribe((response) => {
console.log(response);
// this.dialog.closeAll();
alert('New Gallary has been added...!');
});
}
}
onSelectedFile(event){
if (event.target.files.length > 0){
const image = event.target.files[0];
const formData = new FormData();
formData.append('file', image);
this.fileService.saveFile(formData).subscribe(
res => {
console.log(res);
if (res){
this.uploadError = '';
this.imageId = res.id;
const li: HTMLLIElement = this.renderer.createElement('li');
const img: HTMLImageElement = this.renderer.createElement('img');
img.src = res.path;
this.renderer.addClass(img, 'image');
const a: HTMLAnchorElement = this.renderer.createElement('a');
a.innerText = 'Remove';
this.renderer.addClass(a, 'delete-btn');
// a.addEventListener('click', this.deleteProductImage.bind(this, res.response.filename, a));
this.renderer.appendChild(this.image.nativeElement, li);
this.renderer.appendChild(li, img);
this.renderer.appendChild(li, a);
}
else {
this.uploadError = res.massage;
}
},
err => this.error = err
);
}
}
Gallery Service:
saveGallaryForm(gallary){
return this.http.post<any>('http://localhost:8080/gallary/save', gallary)
.pipe(
retry(1),
catchError(this.errorHandl)
);
}
[![ In below console log, last uploaded image id is getting push. I need all uploaded image ids in this array.][1]][1]