Accordion does not support FormArray

[alsoicode]

Please remember, the issues forum is NOT for support requests. It is for bugs and feature requests only.
Please read https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CONTRIBUTING.md and search
existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.

Bug description:

When binding a FormArray to accordion items, the accordion item will no longer open. No errors are thrown.

I have tried moving the formGroupName directive both inside and outside of the ngbAccordionBody, but neither location works. If I remove the formGroupName and formControlName bindings, the accordion will open as expected.

I have also tried downgrading to Angular 16 and ng-bootstrap 15.1.2, but the same problem exists.

Link to minimally-working StackBlitz that reproduces the issue:

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

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 17.0.2

ng-bootstrap: 16.0.0-rc.0

Bootstrap: 5.3.2

[maxokorokov]

I think the issue you have is to rely on form.value to generate a list of items. The ngFor does something strange and looks like regenerates the DOM, maybe too much? I haven't investigated really.

If you remove the accordion code and just use <div> and <input> for the same structure it wouldn't work either, try it in the example below (try editing the input, it will lose focus immediately).

So it does work for me, if you rely on list of controls → https://stackblitz.com/edit/angular-knog2w-mazdzz?file=src%2Fapp%2Faccordion-basic.html,src%2Fapp%2Faccordion-basic.ts

[alsoicode]

Thanks for looking into this for me. I have used ngFor with form array values elsewhere in my code for presentation data and the accordion works. However, looking back at that code, I also implemented a trackBy for those accordions, and when I add a trackBy to these, it works as expected iterating through .values