Skip to content

formControl.setValue inside a reactive context causes tracking of all signals read by value/validity change subscribers #67073

@Arigatouz

Description

@Arigatouz

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

core

Is this a regression?

Yes

Description

After upgrading from Angular 19 to Angular 21

A component that uses AfterRenderEffect started behaving unexpectedly. When the user clicks a button in a toggle group, the selected value should be reflected correctly, but instead the view is reset to the main title after a render cycle. This appears to be triggered when a form control’ssetValue('main') is called, which causes the render to run in a way that overrides the user’s selection.
If I comment out the setValue('main') call, the component behaves as expected and the selection is preserved, with no unexpected re-renders.
well i susbect that (iam not sure) setValue() is now interacting differently with change detection and AfterRenderEffect between Angular 19 and Angular 21. I am trying to understand whether this is an intentional change in how setValue emits events or triggers rendering, or a regression in how it collaborates with render effects.

Link v19, where it was working link

link v21, where it was broke link

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-tkg2lk9c?file=package-lock.json,src%2Fmain.ts

Please provide the exception or error you saw


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

Angular CLI       : 21.0.2
Angular           : 21.0.3
Node.js           : 20.19.1
Package Manager   : npm 10.8.2
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations       │ 21.0.3            │ ^21.0.3           │
│ @angular/build            │ 21.0.2            │ ^21.0.2           │
│ @angular/cdk              │ 21.1.4            │ ^21.1.4           │
│ @angular/cli              │ 21.0.2            │ ^21.0.2           │
│ @angular/common           │ 21.0.3            │ ^21.0.3           │
│ @angular/compiler         │ 21.0.3            │ ^21.0.3           │
│ @angular/compiler-cli     │ 21.0.3            │ ^21.0.3           │
│ @angular/core             │ 21.0.3            │ ^21.0.3           │
│ @angular/forms            │ 21.0.3            │ ^21.0.3           │
│ @angular/material         │ 21.1.4            │ ^21.1.4           │
│ @angular/platform-browser │ 21.0.3            │ ^21.0.3           │
│ @angular/router           │ 21.0.3            │ ^21.0.3           │
│ rxjs                      │ 7.8.2             │ ^7.8.1            │
│ typescript                │ 5.9.3             │ ^5.9.3            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions