Skip to content

Signal forms array field tracking value causes orphan field error #66711

@wimbarelds

Description

@wimbarelds

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

core, forms

Is this a regression?

No

Description

When in a signalform, you have an array of objects, outside of $index there doesn't seem to be any good tracking value that doesn't cause warnings or errors when the source of the form updates.

@for (child of form.children; track ???) {

Tracking by $index works, but isn't ideal when the array-order may change.
Tracking by child produces a warning (NG0956)
Tracking by child.id().value() causes an orphan field error

The only somewhat working solution that I've found is track formSource().children[$index].id, but I can't imagine that's intended

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-8eawr6lq?file=src%2Fmain.ts

Please provide the exception or error you saw

With `track child.id()`

ERROR Error: RuntimeError: orphan field, can't find element in array <root>.items

With `track child`

NG0956: The configured tracking expression (track by identity) caused re-creation of the entire collection of size 2. This is an expensive operation requiring destruction and subsequent creation of DOM nodes, directives, components etc. Please review the "track expression" and make sure that it uniquely identifies items in a collection. Find more at https://v21.angular.dev/errors/NG0956

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

The Stackblitz is Angular 21.0
The environment I originally had this problem on is Angular 21.1

Angular CLI       : 21.1.0
Angular           : 21.1.0
Node.js           : 22.21.1
Package Manager   : pnpm 10.21.0
Operating System  : win32 x64

┌───────────────────────────────────┬───────────────────┬───────────────────┐
│ Package                           │ Installed Version │ Requested Version │
├───────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations               │ 21.1.0            │ ^21.1.0           │
│ @angular/build                    │ 21.1.0            │ ^21.1.0           │
│ @angular/cli                      │ 21.1.0            │ ^21.1.0           │
│ @angular/common                   │ 21.1.0            │ ^21.1.0           │
│ @angular/compiler                 │ 21.1.0            │ ^21.1.0           │
│ @angular/compiler-cli             │ 21.1.0            │ ^21.1.0           │
│ @angular/core                     │ 21.1.0            │ ^21.1.0           │
│ @angular/forms                    │ 21.1.0            │ ^21.1.0           │
│ @angular/localize                 │ 21.1.0            │ 21.1.0            │
│ @angular/platform-browser         │ 21.1.0            │ ^21.1.0           │
│ @angular/platform-browser-dynamic │ 21.1.0            │ ^21.1.0           │
│ @angular/router                   │ 21.1.0            │ ^21.1.0           │
│ rxjs                              │ 7.8.2             │ ~7.8.2            │
│ typescript                        │ 5.9.3             │ ~5.9.3            │
└───────────────────────────────────┴───────────────────┴───────────────────┘

Anything else?

Most likely related to #65881

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Investigate

Relationships

None yet

Development

No branches or pull requests

Issue actions