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

Do you just want to add model generated this.agrmntsForm Form Group into this.mainForm's agreements array? — navnath
– navnath, Commented Oct 14, 2021 at 5:28
yes. the modal generated form contains agreements ( the group ) and it contains an array of contacts as well. I want both of those things inside my mainForm agreements array, so that the I get both the agreement details as well as the contacts associated with that specific agreement — Aizaz
– Aizaz, Commented Oct 14, 2021 at 5:40
Did you check other questions like: stackoverflow.com/q/59553622/5468463 or stackoverflow.com/q/59588933/5468463. There are so many — Vega
– Vega, Commented Oct 14, 2021 at 5:44
yes I did check this question. it doesn't seem to solve my problem. when I try to access the controls, it says controls are undefined. — Aizaz
– Aizaz, Commented Oct 14, 2021 at 5:54

YogendraR · Accepted Answer · 2021-10-14 07:53:15Z

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

answered Oct 14, 2021 at 7:53

YogendraR

2,40616 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aizaz Over a year ago

Thank you so much. it solves the problem. so what I understood is that I wasn't pushing the form controls (for contacts array). right ?

YogendraR Over a year ago

Yeah, correct. Could you accept and up vote, it will help other as well

navnath · Accepted Answer · 2021-10-14 13:58:10Z

Removed some duplicate code and you need to reinitiate agrmntsForm instead of just reset because if you add multiple contacts, its value will be reset but no of contact array entries remain while adding next time agreement form in the model.

In the below example, you can add/remove contact in the main form

To iterate contacts in the template

<div *ngFor="let contact of getContactFG(agreementIndex);let contactIndex = index" >
    <div [formGroupName]="contactIndex">
        Contact {{ contactIndex + 1 }} <br />
            agreement_type :
        <input type="text" formControlName="agreement_type" /><br />
            company
        <input type="text" formControlName="company" /><br />
            email :
        <input type="text" formControlName="email" /><br />
            name:
        <input type="text" formControlName="name" /><br />
            phone_number :
        <input type="text" formControlName="phone_number" /><br />
        <button (click)="removeContact(agreementIndex, contactIndex)">
            Remove Contact
        </button>
    </div>
</div>

Helper methods to get/delete/add contact in mainForm and agrementForm

  ngOnInit() {
    this.initForms();
  }

  initForms(): void {
    this.agrmntsForm = this.getNewAgreementFG(0);
    this.mainForm = this.formBuilder.group({
      agreements: this.formBuilder.array([]),
    });
  }

  getNewAgreementFG(noOfContacts: number): FormGroup {
    const contactArr = Array.from({ length: noOfContacts }, (v, i) => i).map(
      (n) => this.createContactsCtrl()
    );
    return this.formBuilder.group({
      sales_price: [null],
      closing_cost_support: [null],
      financing: [null],
      contract_date: [null],
      inspection_period: [null],
      closing_date: [null],
      contacts: this.formBuilder.array(contactArr),
    });
  }

  getContactFGByIndex(groupIndex: number): FormArray {
    return (this.agreements().at(groupIndex) as FormGroup).get(
      'contacts'
    ) as FormArray;
  }

  addContactsMain(groupIndex: number) {
    this.getContactFGByIndex(groupIndex).push(this.createContactsCtrl());
  }

  getContactFG(groupIndex: number): FormGroup[] {
    return this.getContactFGByIndex(groupIndex).controls as FormGroup[];
  }

  removeContact(groupIndex: number, contactIndex: number): void {
    this.getContactFGByIndex(groupIndex).removeAt(contactIndex);
  }

  onSubmit() {
    this.isAgsVisible = false;
    const agrementFG = this.getNewAgreementFG(
      this.agrmntsForm.getRawValue().contacts.length
    );
    agrementFG.patchValue(this.agrmntsForm.getRawValue());
    this.agreements().push(agrementFG);
  }

  deleteAgrContact(contactIndex) {
    this.contactsArr().removeAt(contactIndex);
  }

  public agreements(): FormArray {
    return this.mainForm.get('agreements') as FormArray;
  }

Hope this has solved all your problems

Full Angular Demo

Collectives™ on Stack Overflow

How to patch a nested form Array?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related