Angular formArray inside formArray

Question

I am doing inline editing in my project, i am trying to patchvalue data from server, i have formarray inside the formArray for my accountNumbers array, but when i try to change value of inputs it gives error: Error: Cannot find control with path: 'type -> options -> 0 -> accountNumbers -> accountNumber' what am i doing wrong? here is my stackblitz

.ts

    this.editCompanies = this._formBuilder.group({
      type: this._formBuilder.group({
        options: this._formBuilder.array([]),
      }),
    });

    const control = <FormArray>this.editCompanies.get('type.options');
    this.items.forEach((x) => {
      control.push(
        this.patchValues(x.name, x.identificationCode, x.accountNumbers)
      );
      console.log(control);
    });
  }

  patchValues(name, identificationCode, accountNumbers) {
    return this._formBuilder.group({
      name: [name],
      identificationCode: [identificationCode],
      accountNumbers: new FormArray([this.initOptions()]),
    });
  }

  initOptions() {
    return new FormGroup({
      accountNumber: new FormControl(''),
    });
  }

.html

  <div class="col-lg-5 accountNumbers">
    <span formArrayName="accountNumbers">
        <span class="value" [ngClass]="{'my_class': hidemeSub[index] === true}"
        [hidden]="hidemeSub[index]"> {{item.accountNumbers}}</span>
        <input type="text" class="form-control" formControlName="accountNumber" [hidden]="!hidemeSub[index]">
    </span>
  </div>

akotech · Accepted Answer · 2022-02-19 21:47:21Z

1

If you look at the path, you can see that your missing the index of the elemento of the second FormArray.

type -> options -> 0 -> accountNumbers -> [missing_index] -> accountNumber

Similar as you are assigning the first FormArray index using:

<div class="example-accordion-item-header nusx row" formArrayName="options"
    *ngFor="let item of items; let index = index;">
    <ng-container [formGroupName]="index">

You need also to loop through the second array items and assign this second index using the proper ControlName directive. Since its also an array of FormGroup, you could do something like this:

<ng-container 
  *ngFor="let accountNumber of item.accountNumbers; let accIndex = index" 
  [formGroupName]="accIndex"
>
  <input type="text" class="form-control" formControlName="accountNumber" [hidden]="!hidemeSub[index]">
</ng-container>

EDIT

You also need to properly initialize the FormGroup for the account numbers, creating one group per account:

patchValues(name, identificationCode, accountNumbers) {
  return this._formBuilder.group({
    ...
    accountNumbers: new FormArray(
      accountNumbers.map((account) => this.createAccountControl(account))
    ),
  });
}


//I renamed the method initOptions to better reflect the purpose
createAccountControl(initialValue: string = '') {
  return new FormGroup({
    accountNumber: new FormControl(initialValue),
  });
}

Cheers

edited Feb 19, 2022 at 21:47

answered Feb 19, 2022 at 18:34

akotech

2,3042 gold badges7 silver badges12 bronze badges

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

4 Comments

user16357452 Over a year ago

hi! thanks for the answer! i tried your code but accIndex is 1 for all inputs, i updated my stackblitz.

akotech Over a year ago

The problem is that you aren't creating one FormGroup per accountNumber in the array. I've updated my answer to show you how you can solve it.

user16357452 Over a year ago

thank u so much for your help and detailed answer! can i ask you one more question? as you can see i am doing inline editing, but for the object that has no accountNumbers when you click on edit input is hidden, why is that? i want user to add it if it is empty

user16357452 Over a year ago

I updated my stackblitz

Collectives™ on Stack Overflow

Angular formArray inside formArray

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related