Which @angular/* package(s) are the source of the bug?
forms
Is this a regression?
No
Description
The minimal reproduction (see link) contains a parent component (app.ts) with two independent FormControls. Only one of them should be visible at a time. The selected control can be changed with the Switch control button.
The selected FormControl is attached to a child component (cva.ts) that provides an NG_VALUE_ACCESSOR. The child component simply wraps a native with a default control value accessor.
When the selected FormControl in the parent component is changed, somehow, the first FormControl’s value is overwritten with the second one’s.
Please provide a link to a minimal reproduction of the bug
https://github.com/mwaibel-go/cva-reproduction
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI : 21.2.11
Angular : 21.2.13
Node.js : 24.13.0
Package Manager : npm 11.11.1
Operating System : linux x64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 21.2.11 │ ^21.2.7 │
│ @angular/cli │ 21.2.11 │ ^21.2.7 │
│ @angular/common │ 21.2.13 │ ^21.2.0 │
│ @angular/compiler │ 21.2.13 │ ^21.2.0 │
│ @angular/compiler-cli │ 21.2.13 │ ^21.2.0 │
│ @angular/core │ 21.2.13 │ ^21.2.0 │
│ @angular/forms │ 21.2.13 │ ^21.2.0 │
│ @angular/platform-browser │ 21.2.13 │ ^21.2.0 │
│ @angular/router │ 21.2.13 │ ^21.2.0 │
│ rxjs │ 7.8.2 │ ~7.8.0 │
│ typescript │ 5.9.3 │ ~5.9.2 │
│ vitest │ 4.1.6 │ ^4.0.8 │
Anything else?
When not using a custom NG_VALUE_ACCESSOR this issue does not appear. That is, replacing
<app-cva [formControl]="selectedControl" />
with
<input [formControl]="selectedControl>
in the parent component behaves as expected.
The CVA issue can be worked around by forcing Angular to re-create the CVA by removing it from the template via an @if, then swapping out the controls, and then showing the CVA again. I’ve demonstrated this in the workaround branch.
I was also able to reproduce this in Angular 18.
Which @angular/* package(s) are the source of the bug?
forms
Is this a regression?
No
Description
The minimal reproduction (see link) contains a parent component (app.ts) with two independent FormControls. Only one of them should be visible at a time. The selected control can be changed with the Switch control button.
The selected FormControl is attached to a child component (cva.ts) that provides an NG_VALUE_ACCESSOR. The child component simply wraps a native with a default control value accessor.
When the selected FormControl in the parent component is changed, somehow, the first FormControl’s value is overwritten with the second one’s.
Please provide a link to a minimal reproduction of the bug
https://github.com/mwaibel-go/cva-reproduction
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run
ng version)Anything else?
When not using a custom NG_VALUE_ACCESSOR this issue does not appear. That is, replacing
with
in the parent component behaves as expected.
The CVA issue can be worked around by forcing Angular to re-create the CVA by removing it from the template via an @if, then swapping out the controls, and then showing the CVA again. I’ve demonstrated this in the workaround branch.
I was also able to reproduce this in Angular 18.