[SOLVED] ng-bootstrap accordion won't open when it contains reactive form bindings

ng-bootstrap accordion won't open when it contains reactive form bindings

I would like to use Angular Bootrap's accordion with a Form Array.

However, as soon as I add any type of form binding inside the accordion, it will no longer open, and I'm not getting any exception errors. I'm using ng-bootstrap version 15.1.1

The accordion template code:

<div ngbAccordion>
  <ng-container [formGroup]="form">
    <ng-container [formArrayName]="'worksheets'">
      <div ngbAccordionItem *ngFor="let worksheet of form.value.worksheets; let i = index;">

        <h2 ngbAccordionHeader>
          <button ngbAccordionButton>{{ worksheet.name }}</button>
        </h2>
        <div ngbAccordionCollapse>
          <div ngbAccordionBody>
            <ng-template>
              <ng-container [formGroupName]="i">
                <label for="name1">Name</label>
                <input id="name1" type="text" [formControlName]="'name'">
              </ng-container>
            </ng-template>
          </div>
        </div>

      </div>
    </ng-container>
  </ng-container>
</div>

StackBlitz: https://stackblitz.com/edit/angular-knog2w?file=src%2Fapp%2Faccordion-basic.html

If I remove the [formGroupName] and [formControlName] bindings, the accordion will open as expected.

The FormsModule and ReactiveFormsModules are included in my feature module, as well as the NgbAccordionModule and NgbCollapseModule modules.

What am I missing here? Is it not possible to use forms inside an accordion?

Solution

After talking to the developers at ng-bootstrap: https://github.com/ng-bootstrap/ng-bootstrap/issues/4615#issuecomment-1808145224

The issue can be resolved by adding a trackBy function to the *ngFor to limit the number of times the DOM is changed.