fix(cdk/stepper): show error state if explicitly enabled (#22540)

Currently we have a feature where a step can be forced into an error state using the `hasError` input. The problem is that doing so won't actually change anything by default, because the `showError` option also has to be provided through an injection token.

These changes add some logic so that the error will be shown automatically, if it was set explicitly through `hasError`.

Fixes #22539.

Author: crisbeto

src/cdk/stepper/stepper.ts

@@ -112,7 +112,6 @@ export interface StepperOptions {
 })
 export class CdkStep implements OnChanges {
   private _stepperOptions: StepperOptions;
-  _showError: boolean;
   _displayDefaultIndicatorType: boolean;
 
   /** Template for step label if it exists. */
@@ -202,7 +201,6 @@ export class CdkStep implements OnChanges {
       @Optional() @Inject(STEPPER_GLOBAL_OPTIONS) stepperOptions?: StepperOptions) {
     this._stepperOptions = stepperOptions ? stepperOptions : {};
     this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
-    this._showError = !!this._stepperOptions.showError;
   }
 
   /** Selects this step component. */
@@ -240,6 +238,13 @@ export class CdkStep implements OnChanges {
     }
   }
 
+  /** Determines whether the error state can be shown. */
+  _showError(): boolean {
+    // We want to show the error state either if the user opted into/out of it using the
+    // global options, or if they've explicitly set it through the `hasError` input.
+    return this._stepperOptions.showError ?? this._customError != null;
+  }
+
   static ngAcceptInputType_editable: BooleanInput;
   static ngAcceptInputType_hasError: BooleanInput;
   static ngAcceptInputType_optional: BooleanInput;
@@ -442,7 +447,7 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
   }
 
   private _getDefaultIndicatorLogic(step: CdkStep, isCurrentStep: boolean): StepState {
-    if (step._showError && step.hasError && !isCurrentStep) {
+    if (step._showError() && step.hasError && !isCurrentStep) {
       return STEP_STATE.ERROR;
     } else if (!step.completed || isCurrentStep) {
       return STEP_STATE.NUMBER;
@@ -453,7 +458,7 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
 
   private _getGuidelineLogic(
       step: CdkStep, isCurrentStep: boolean, state: StepState = STEP_STATE.NUMBER): StepState {
-    if (step._showError && step.hasError && !isCurrentStep) {
+    if (step._showError() && step.hasError && !isCurrentStep) {
       return STEP_STATE.ERROR;
     } else if (step.completed && !isCurrentStep) {
       return STEP_STATE.DONE;

src/material/stepper/public-api.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export {StepperOrientation} from '@angular/cdk/stepper';
+export {StepperOrientation, StepState} from '@angular/cdk/stepper';
 export * from './stepper-module';
 export * from './step-label';
 export * from './stepper';

src/material/stepper/stepper.spec.ts

@@ -1168,21 +1168,22 @@ describe('MatStepper', () => {
     let fixture: ComponentFixture<MatHorizontalStepperWithErrorsApp>;
     let stepper: MatStepper;
 
-    beforeEach(() => {
+    function createFixture(showErrorByDefault: boolean|undefined) {
       fixture = createComponent(
         MatHorizontalStepperWithErrorsApp,
         [{
           provide: STEPPER_GLOBAL_OPTIONS,
-          useValue: {showError: true}
+          useValue: {showError: showErrorByDefault}
         }],
         [MatFormFieldModule, MatInputModule]
       );
       fixture.detectChanges();
       stepper = fixture.debugElement
           .query(By.css('mat-horizontal-stepper'))!.componentInstance;
-    });
+    }
 
     it('should show error state', () => {
+      createFixture(true);
       const nextButtonNativeEl = fixture.debugElement
           .queryAll(By.directive(MatStepperNext))[0].nativeElement;
 
@@ -1195,6 +1196,7 @@ describe('MatStepper', () => {
     });
 
     it('should respect a custom falsy hasError value', () => {
+      createFixture(true);
       const nextButtonNativeEl = fixture.debugElement
           .queryAll(By.directive(MatStepperNext))[0].nativeElement;
 
@@ -1210,6 +1212,19 @@ describe('MatStepper', () => {
       expect(stepper._getIndicatorType(0)).not.toBe(STEP_STATE.ERROR);
     });
 
+    it('should show error state if explicitly enabled, even when disabled globally', () => {
+      createFixture(undefined);
+      const nextButtonNativeEl = fixture.debugElement
+          .queryAll(By.directive(MatStepperNext))[0].nativeElement;
+
+      stepper.selectedIndex = 1;
+      stepper.steps.first.hasError = true;
+      nextButtonNativeEl.click();
+      fixture.detectChanges();
+
+      expect(stepper._getIndicatorType(0)).toBe(STEP_STATE.ERROR);
+    });
+
   });
 
   describe('stepper using Material UI Guideline logic', () => {

tools/public_api_guard/cdk/stepper.d.ts

@@ -1,7 +1,6 @@
 export declare class CdkStep implements OnChanges {
     _completedOverride: boolean | null;
     _displayDefaultIndicatorType: boolean;
-    _showError: boolean;
     _stepper: CdkStepper;
     ariaLabel: string;
     ariaLabelledby: string;
@@ -23,6 +22,7 @@ export declare class CdkStep implements OnChanges {
     stepLabel: CdkStepLabel;
     constructor(_stepper: CdkStepper, stepperOptions?: StepperOptions);
     _markAsInteracted(): void;
+    _showError(): boolean;
     ngOnChanges(): void;
     reset(): void;
     select(): void;