Issue with using @for built-in template syntax while removing dynamic form array elements

[sandeepsuvit]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

I was trying to use the new build-in template syntax @for in one of my projects for creating dynamic form array elements. I have also added an option to delete the form array items in the code using which we can remove the items added in the form array. When I create, for example 3 items in the form array and then removing the 2nd element programatically from the list, then the last element is always getting deleted and not the one which I intended to delete.

1. 
2. 
3. 

I deleted the Sub task 2 but its showing as Sub task 3 got removed from ui. The json data however shows the form value correctly. Its mainly the ui thats causing the confusion, not sure if this is a two-way binding issue or something

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-svsq3t

Please provide the exception or error you saw

There are no exceptions in the console, but the order of the element remaining after deleting isn't correct or at-least it isn't correctly displayed in the ui

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 18.0.1
Node: 20.13.1
Package Manager: npm 10.8.0
OS: darwin x64

Angular: 18.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.1
@angular-devkit/build-angular   18.0.1
@angular-devkit/core            18.0.1
@angular-devkit/schematics      18.0.1
@angular/cli                    18.0.1
@schematics/angular             18.0.1
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

Anything else?

No response

[DimitriTsikaridze]

@for loop fails to correctly update for some reason because I subscribed to form value changes and it's logging correct values

I deleted 2 and 3, which you can see in devtools

[JoostK]

There is an issue with using formControlName where the name doesn't change but the backing control does. There's probably an existing issue for this already but I couldn't find it.

You can work around it in two ways:

1. Track by control identity instead of index, using track subTask.
2. Use the formGroup directive instead of formGroupName using [formGroup]="$any(subTask)" (where I used the $any cast to avoid the typing issue, there may be a better alternative) as doing so does cause the formGroup binding's identity to change, similar to option 1.

[JeanMeche]

It's basically a dupe of #21682.

[akivamu]

1. Track by control identity instead of index, using track subTask.

This is easiest solution, but showing NG0956 warning tho.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}