components icon indicating copy to clipboard operation
components copied to clipboard

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

Open eLarocque opened this issue 1 year ago • 2 comments
trafficstars

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 avatar Sep 17 '24 18:09 eLarocque

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

crisbeto avatar Oct 09 '24 10:10 crisbeto

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

Sepandard avatar Oct 14 '24 09:10 Sepandard

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.