Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Custom Form Controls not updating touch state changes from API #29750

Closed
1 task
eLarocque opened this issue Sep 17, 2024 · 2 comments
Closed
1 task

bug: Custom Form Controls not updating touch state changes from API #29750

eLarocque opened this issue Sep 17, 2024 · 2 comments
Labels
docs This issue is related to documentation good first issue This issue is a good place to start for first time contributors to the project P4 A relatively minor issue that is not relevant to core functions

Comments

@eLarocque
Copy link

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

My custom form controls do not support the FormControl APIs for things related to the touch state.

Specific use case: I am attempting to reset a form control after it has been touched, but the "touched" states are not reset, which makes any previous error states persist.

Comparing with built in controls like matInput, we can see the differences and reproduce this issue. I have modified the latest Angular Material Stackblitz example (taken from https://v18.material.angular.io/guide/creating-a-custom-form-field-control) and added a matInput control side by side with the custom Telephone control

Maybe it is possible to handle these cases but the example on the official docs do not reflect that possiblity...

Reproduction

StackBlitz link: https://stackblitz.com/edit/sjcjgs-bpf7wt

Steps to reproduce:
You can see 2 issues in this example:

  1. The custom form control ignores the API call markAsTouched, whereas the matInput does not.

Steps:

  • Click on "Touch Controls" button
  • Notice only the matInput control turns invalid (expected due to required validators)
  1. After manually touching the custom form control, it ignores the API call reset, whereas the matInput does not.

Steps:

  • Click on "Touch Controls" button
  • Manually click on the Telephone custom control and focus out of the control
  • (at this point both controls should be in an "invalid" state due to required validators and touched state)
  • Click on "Reset Controls" button
  • Notice only the matInput control's invalid state disappears

Expected Behavior

Should be able to set / reset touched state using the FormControl API on Custom Form Controls

Actual Behavior

The touched stats is never updated

Environment

  • Angular: 18
  • CDK/Material: 18
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@eLarocque eLarocque added the needs triage This issue needs to be triaged by the team label Sep 17, 2024
@eLarocque eLarocque changed the title bug: Custom Form Controls not supporting API features bug: Custom Form Controls not updating touch state changes from API Sep 17, 2024
@crisbeto
Copy link
Member

crisbeto commented Oct 9, 2024

This likely has more to do with the errorState getter than the forms integration.

@crisbeto crisbeto added docs This issue is related to documentation P4 A relatively minor issue that is not relevant to core functions good first issue This issue is a good place to start for first time contributors to the project and removed needs triage This issue needs to be triaged by the team labels Oct 9, 2024
@Sepandard
Copy link
Contributor

Hi, everyone. Is anybody working on this issue? I can try to fix it if you don't mind.

Sepandard added a commit to Sepandard/components that referenced this issue Nov 21, 2024
crisbeto pushed a commit that referenced this issue Nov 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs This issue is related to documentation good first issue This issue is a good place to start for first time contributors to the project P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

No branches or pull requests

3 participants