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.

Sign up for GitHub

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

Jump to bottom

bug(matInput): Form field doesn't update asterisk after the form was reassigned #29066

Open
ilyakonrad opened this issue Apr 10, 2024 · 3 comments · May be fixed by #30395
Open

bug(matInput): Form field doesn't update asterisk after the form was reassigned #29066

ilyakonrad opened this issue Apr 10, 2024 · 3 comments · May be fixed by #30395
Labels
area: material/form-field P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@ilyakonrad
Copy link

ilyakonrad commented Apr 10, 2024 •
edited
Loading

Is this a regression?

No idea

Description

Form field doesn't update the visual state (asterisk) based on validators (unless you touch it or call markAsTouched()) after the form property is reassigned with a fresh form.

It's even worse when the field has a value: asterisk isn't updated even after calling markAsTouched(), you have to manually touch the field in order for the asterisk to update.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-q9ufsm
Steps to reproduce:

  1. Click on the "toggle" button a few times. Notice that asterisk toggles along with the validators updates.
  2. Click on the "reassign" button.
  3. Click on the "toggle" button a few times again. Notice that the field doesn't reflect validators updates.
  4. Touch the field or click "mark as touched" button. Notice that the state of the field is now correct.
  5. Enter something in the field.
  6. Click on the "toggle" button a few times again. Notice that asterisk is not visible even after clicking "mark as touched".
  7. Click into the field. Notice that the state of the field is now correct.

Expected Behavior

Asterisk visibility should correspond to the presence of Validators.required.

Actual Behavior

Asterisk isn't updated if the field is untouched and the form was reassigned.

Environment

Angular CLI: 17.3.3
Node: 20.10.0
Package Manager: yarn 1.22.19
OS: win32 x64

Angular: 17.3.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker

Package Version

@angular-devkit/architect 0.1703.3
@angular-devkit/build-angular 17.3.3
@angular-devkit/core 17.3.3
@angular-devkit/schematics 17.3.3
@angular/fire 17.0.1
@schematics/angular 17.3.3
rxjs 7.8.1
typescript 5.4.4
webpack 5.91.0
zone.js 0.14.4
@ilyakonrad ilyakonrad added the needs triage This issue needs to be triaged by the team label Apr 10, 2024
@ilyakonrad ilyakonrad changed the title bug(matInput): Untouched form field doesn't update asterisk after the form was reassigned bug(matInput): Form field doesn't update asterisk after the form was reassigned Apr 10, 2024
@amysorto amysorto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Apr 10, 2024
@crisbeto
Copy link
Member

This is likely an issue with the forms module since we read the required state from the control here: https://github.com/angular/components/blob/main/src/material/input/input.ts#L178. I'm transferring the issue to the main repo.

@crisbeto crisbeto transferred this issue from angular/components May 17, 2024
@crisbeto crisbeto added needs triage This issue needs to be triaged by the team and removed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels May 17, 2024
@JoostK
Copy link
Member

JoostK commented May 17, 2024 •
edited
Loading

I suspect this is an OnPush issue in mat-form-field, not Angular's forms module.

Per

components/src/material/form-field/form-field.ts

Lines 410 to 414 in c40cb80

control.stateChanges.subscribe(() => {
this._updateFocusState();
this._syncDescribedByIds();
this._changeDetectorRef.markForCheck();
});
a markForCheck occurs on state changes, but swapping out the control entirely supposedly doesn't cause the same.

@crisbeto
Copy link
Member

Ah you're right, triggering the change detection eventually makes it catch up. Transferring this back.

@crisbeto crisbeto transferred this issue from angular/angular May 17, 2024
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: material/form-field and removed needs triage This issue needs to be triaged by the team labels May 17, 2024
naaajii added a commit to naaajii/components that referenced this issue Jan 27, 2025
@naaajii
fix(material/form-field): trigger CD when form
99cb728 
gets reassigned

fixes the issue we were not marking component
for changes when form is reassigned making it
not update UI for required asterisk

fixes angular#29066
@naaajii naaajii linked a pull request Jan 27, 2025 that will close this issue
Open
naaajii added a commit to naaajii/components that referenced this issue Feb 4, 2025
@naaajii
fix(material/form-field): trigger CD when form
906f129 
gets reassigned

fixes the issue we were not marking component
for changes when form is reassigned making it
not update UI for required asterisk

fixes angular#29066
naaajii added a commit to naaajii/components that referenced this issue Feb 5, 2025
@naaajii
fix(material/form-field): trigger CD when form
3fbbc82 
gets reassigned

fixes the issue we were not marking component
for changes when form is reassigned making it
not update UI for required asterisk

fixes angular#29066
naaajii added a commit to naaajii/components that referenced this issue Feb 6, 2025
@naaajii
fix(material/form-field): trigger CD when form
44ff908 
gets reassigned

fixes the issue we were not marking component
for changes when form is reassigned making it
not update UI for required asterisk

fixes angular#29066
naaajii added a commit to naaajii/components that referenced this issue Feb 10, 2025
@naaajii
fix(material/form-field): trigger CD when form
2994a25 
gets reassigned

fixes the issue we were not marking component
for changes when form is reassigned making it
not update UI for required asterisk

fixes angular#29066
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: material/form-field P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/form-field): trigger CD when form gets reassigned naaajii/components
4 participants
@JoostK @crisbeto @amysorto @ilyakonrad