Reactive Form Data Binding with Angular Service

Question

I have 5 forms so I am implementing data service to connect them. Service working fine and I am getting data in service but when I will go from one page to the second page and click on next them I will only get second form data but I want first form data also So that in final stage I can send all collected data to API. this is the my code

`import { Injectable } from '@angular/core';`
`import { AddBusinessMutation} from 'src/app/graphql'`
`import{FormGroup, FormControl, Validators,FormArray} from '@angular/forms'`

`@Injectable({
    providedIn: 'root'
})`
`export class AddbusinessService {`
    `business: AddBusinessMutation;`
    `businesses: [];`
    `setGeneralFormData(data) {`
        `// this.businesses = data.socialLinks;
        // this.business = data.frmData;`
        `console.log(data)
    }`
`constructor(){`
    `}`
`}`

Answer 1

I think you should push every form data to businesses array and append new properties to business object

business: AddBusinessMutation;
businesses: any[] = [];
setGeneralFormData(data) {
  this.businesses.push(data.socialLinks)
  this.business = <AddBusinessMutation> Object.assign({}, this.business, data.frmData)
  console.log(data);
}

instead of

setGeneralFormData(data) {
  this.businesses = data.socialLinks;
  this.business = data.frmData;
  console.log(data)
}