Skip to content

Custom form control does not propagate touched state to form field #69308

@NielsMommen

Description

@NielsMommen

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

forms

Is this a regression?

No

Description

The docs mention that:

Use model() for touched when your control updates it on user interaction. The touched property uniquely supports model(), input(), or OutputRef depending on your needs.

When implementing touched in a custom control as a model, it does not correctly propagate the touched state to the connected form field.

It is also not possible to use an OutputRef for the touched state. The interface of FormUiControl does only allow an input.

However, it is possible to implement touch, which does correctly propagate the touched state to the connected form field. This is not mentioned in the docs and renders the use of model for the touched state useles.

Please provide a link to a minimal reproduction of the bug

https://github.com/NielsMommen/signal-forms-touched

Please provide the exception or error you saw

The touched state should correctly be propagated to the connected form field.

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

Angular CLI       : 22.0.1
Angular           : 22.0.0
Node.js           : 24.16.0
Package Manager   : pnpm 11.5.3
Operating System  : darwin arm64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 22.0.1            │ ^22.0.1           │
│ @angular/cli              │ 22.0.1            │ ^22.0.1           │
│ @angular/common           │ 22.0.0            │ ^22.0.0           │
│ @angular/compiler         │ 22.0.0            │ ^22.0.0           │
│ @angular/compiler-cli     │ 22.0.0            │ ^22.0.0           │
│ @angular/core             │ 22.0.0            │ ^22.0.0           │
│ @angular/forms            │ 22.0.0            │ ^22.0.0           │
│ @angular/platform-browser │ 22.0.0            │ ^22.0.0           │
│ @angular/router           │ 22.0.0            │ ^22.0.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 6.0.3             │ ~6.0.2            │
│ vitest                    │ 4.1.8             │ ^4.0.8            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status
    No status

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions