search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.73k forks source link

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

Open ilyakonrad opened 5 months ago

ilyakonrad commented 5 months ago

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

crisbeto commented 4 months ago

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.

JoostK commented 4 months ago

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

Per https://github.com/angular/components/blob/c40cb8003d6ad41178e5290e4c2bc86ab47e832d/src/material/form-field/form-field.ts#L410-L414 a markForCheck occurs on state changes, but swapping out the control entirely supposedly doesn't cause the same.

crisbeto commented 4 months ago

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