how can I dynamically remove an error at the ng-stepper level?

Question

I was trying to use this angular HTML

<mat-stepper #stepper>
  <mat-step [stepControl]="gadsForm" [attr.errorMessage]="showStepperError ? firstStepError : null">

But regardless of showStepperError's value - the stepper always shows an error.

Answer 1

Adding [hasError] is the only thing that has worked for me:

<mat-step [stepControl]="gadsForm" [errorMessage]="stepperErrorMessage" [hasError]="stepperErrorMessage !== ''">

Answer 2

errorMessage is an input property for the mat-step component, not an attribute

Please change the errorMessage property as shown below:

<mat-step [stepControl]="gadsForm" [errorMessage]="showStepperError ? firstStepError : null">