How to patch a nested form Array?

Question

I have data coming from a form(modal) that I have to patch into another form (collapse). this is the form where the data is coming from.

formInitializer() {
    this.agrmntsForm = this.formBuilder.group({
      sales_price: new FormControl(''),
      closing_cost_support: new FormControl(''),
      financing: new FormControl(''),
      contract_date: new FormControl(''),
      inspection_period: new FormControl(''),
      closing_date: new FormControl(''),
      contacts: this.formBuilder.array([]),
    });
  } 

and this is the form I am trying to patch the data into:

mainFormInitializer() {
    this.mainForm = this.formBuilder.group({
      agreements: this.formBuilder.array([]),
    });
  }

currently I am patching the data on the first form (modal) submit. and it does patch the first array but I am having a tough time patching the nested form Array inside it.

this is the code for patching the form :

patchControls(formValue) {
    const control = <FormArray>this.mainForm.get('agreements');
    // const control2 = <FormArray>this.mainForm.get('contacts');
    console.log('form here', this.mainForm.controls.contacts);
    for (const obj of formValue) {
      const addrCtrl = this.createAgreementsGroup();
      const contactsCtrl = this.createContactsCtrl();
      addrCtrl.patchValue(obj);
      control.push(addrCtrl);
    }
  }

I have added the code to stackblitz

Answer 1

You need to update below methods:

createAgreementsGroup(obj) {
 return this.formBuilder.group({
   closing_cost_support: [obj.closing_cost_support],
   closing_date: [obj.closing_date],
   contract_date: [obj.contract_date],
   financing: [obj.financing],
   inspection_period: [obj.inspection_period],
   sales_price: [obj.sales_price],
  contacts: this.formBuilder.array(this.createContactsCtrl(obj.contacts))
 });
}


createContactsCtrl(data) {
  console.log('contacts', data);
   const formArray = [];

   for(let contact of data){
     formArray.push(
       this.formBuilder.group({
         agreement_type: [contact.agreement_type],
         company: [contact.company],
         email: [contact.email],
         name: [contact.name],
         phone_number: [contact.phone_number],
      })
    );
   }
  return formArray;
 }

patchControls(data2) {
  const control = <FormArray>this.mainForm.get('agreements');

  for (const obj of data2) {
    const addrCtrl = this.createAgreementsGroup(obj);
    control.push(addrCtrl);
 }
}

Check this stackblitz