Stepper no stateChanged when updateValueAndValidity

[keatkeat87]

Expected Behavior

When user submit and facing an duplicate name error, the step 1 should show error.

Actual Behavior

The step 1 no show error.

Workaround and my guess:

manually call this.stepper._stateChanged() can make all thing right. so my guess is inside stepper no subscribe AbstractControl.statusChanges event.

This is just what I accidentally discovered, maybe it is a omission. and final i used another interactive experience to avoid this problem. so if you don't think it is a bug or feature then you can close it.

Environment

• Angular: 8.1.1
• CDK/Material: 8.1.1
• Browser(s): chrome 75.x
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[andrewseguin]

Do you mind adding a link for us to reproduce this?

[keatkeat87]

https://github.com/keatkeat87/angular-stepper-no-state-change-issue https://stackblitz.com/github/keatkeat87/angular-stepper-no-state-change-issue

i m sorry, stackblitz not able to import this, don't know why. maybe you have to git clone

steps reproduce:

1. git clone https://github.com/keatkeat87/angular-stepper-no-state-change-issue
2. yarn install
3. ng serve --open
4. click next
5. click next
6. click submit (after loading done, step 1 should show error, but no)
7. click step 1 will see the input is already error.
8. uncomment this.stepper._stateChanged(); (everything ok)

the use-case is : when 2 user fill in same username at the same time. at first, both of them async validation will be valid. but one of them submit first, he succeed, but another one will error from server side duplication username. application then call updateValueAndValidity to check again and show error.

[crisbeto]

The stateChanges is used primarily to notify child components so that they can react to changes in the state of the stepper since all our components use OnPush change detection. It isn't really meant to be something that reflects changes in the value.

[jerome-nelson]

@crisbeto

This seems like a logical potential feature (rather than an issue) i.e "Updating mat-step-header icons state to support async statusChanges":

1) The cdkStepper and MatStepper already support sync state inheritance via @Input() stepControl. Since FormControl Status can also update asynchronously, supporting this makes sense. 2) Since it's at the UI level only, we could subscribe stepControl.statusChanges and call _getIndicatorType on emitted changes to update STEP_STATE?

However @keatkeat87,

Currently you can achieve this behaviour by using hasError and passing a boolean variable that updates on statusChanges. It will have the same effect

Basic Example:

 <mat-step [hasError]="isInvalid$ | async"  [stepControl]="firstFormGroup">

    this.isInvalid$ = this.firstFormGroup.statusChanges.pipe(
      map(currentStatus =>  currentStatus.toLowerCase() === 'invalid')
    );

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.