feat(stepper): add showError Input, update _getIndicatorType logic, add completed and hasError as an Input, rename alertMessage to errorMessage

Author: arodr967

src/cdk/stepper/stepper.ts

@@ -98,8 +98,8 @@ export class CdkStep implements OnChanges {
   /** Plain text label of the step. */
   @Input() label: string;
 
-  /** Alert message when there's an error. */
-  @Input() alertMessage: string;
+  /** Error message to display when there's an error. */
+  @Input() errorMessage: string;
 
   /** Aria label for the tab. */
   @Input('aria-label') ariaLabel: string;
@@ -110,9 +110,6 @@ export class CdkStep implements OnChanges {
    */
   @Input('aria-labelledby') ariaLabelledby: string;
 
-  /** Alert message when there's an error. */
-  @Input() alertMessage: string;
-
   /** Whether the user can return to this step once it has been marked as complted. */
   @Input()
   get editable(): boolean { return this._editable; }
@@ -137,7 +134,16 @@ export class CdkStep implements OnChanges {
   }
   private _state: StepState | string | null = null;
 
+  /** Whether to show the step is in an error state. */
+  @Input()
+  get showError(): boolean { return this._showError; }
+  set showError(value: boolean) {
+    this._showError = value;
+  }
+  private _showError: boolean = false;
+
   /** Whether step is marked as completed. */
+  @Input()
   get completed(): boolean {
     return this._customCompleted == null ? this._defaultCompleted : this._customCompleted;
   }
@@ -151,15 +157,16 @@ export class CdkStep implements OnChanges {
   }
 
   /** Whether step has error. */
+  @Input()
   get hasError(): boolean {
-    return this._customError == null ? this._defaultError : this._customError;
+    return this._customError == null ? this._getDefaultError : this._customError;
   }
   set hasError(value: boolean) {
     this._customError = coerceBooleanProperty(value);
   }
   private _customError: boolean | null = null;
 
-  private get _defaultError() {
+  private get _getDefaultError() {
     return this.stepControl && this.stepControl.invalid;
   }
 
@@ -328,7 +335,7 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
     const step = this._steps.toArray()[index];
     const isCurrentStep = this._isCurrentStep(index);
 
-    if (step.hasError && !isCurrentStep) {
+    if (step.showError && step.hasError && !isCurrentStep) {
       return STEP_STATE.ERROR;
     } else if (step.completed && !isCurrentStep) {
       return STEP_STATE.DONE;

src/demo-app/stepper/stepper-demo.html

@@ -6,7 +6,8 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
     <mat-step
       formGroupName="0"
       [stepControl]="formArray?.get([0])"
-      alertMessage="Some fields are required"
+      errorMessage="Some fields are required"
+      [completed]="true"
     >
       <ng-template matStepLabel>Fill out your name</ng-template>
       <mat-form-field>
@@ -29,7 +30,8 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
       formGroupName="1"
       [stepControl]="formArray?.get([1])"
       optional
-      alertMessage="The input is invalid"
+      errorMessage="The input is invalid"
+      [showError]="true"
     >
       <ng-template matStepLabel>
         <div>Fill out your email address</div>
@@ -107,7 +109,7 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
 <h3>Vertical Stepper Demo</h3>
 <mat-checkbox [(ngModel)]="isNonEditable">Make steps non-editable</mat-checkbox>
 <mat-vertical-stepper>
-  <mat-step [editable]="!isNonEditable">
+  <mat-step [editable]="!isNonEditable" [completed]="false">
     <ng-template matStepLabel>Fill out your name</ng-template>
     <mat-form-field>
       <mat-label>First name</mat-label>
@@ -123,7 +125,7 @@ <h3>Vertical Stepper Demo</h3>
     </div>
   </mat-step>
 
-  <mat-step [editable]="!isNonEditable">
+  <mat-step [editable]="!isNonEditable" [completed]="false">
     <ng-template matStepLabel>
       <div>Fill out your phone number</div>
     </ng-template>
@@ -137,7 +139,7 @@ <h3>Vertical Stepper Demo</h3>
     </div>
   </mat-step>
 
-  <mat-step [editable]="!isNonEditable">
+  <mat-step [editable]="!isNonEditable" [completed]="false">
     <ng-template matStepLabel>
       <div>Fill out your address</div>
     </ng-template>
@@ -151,7 +153,7 @@ <h3>Vertical Stepper Demo</h3>
     </div>
   </mat-step>
 
-  <mat-step>
+  <mat-step [editable]="!isNonEditable" [completed]="false">
     <ng-template matStepLabel>Confirm your information</ng-template>
     Everything seems correct.
     <div>

src/lib/stepper/step-header.html

@@ -57,6 +57,6 @@
   <div class="mat-step-text-label" *ngIf="_stringLabel()">{{label}}</div>
 
   <div class="mat-step-optional" *ngIf="optional && state != 'error'">{{_intl.optionalLabel}}</div>
-  <div class="mat-step-sub-label-error" *ngIf="state == 'error'">{{alertMessage}}</div>
+  <div class="mat-step-sub-label-error" *ngIf="state == 'error'">{{errorMessage}}</div>
 </div>
 

src/lib/stepper/step-header.ts

@@ -44,8 +44,8 @@ export class MatStepHeader implements OnDestroy {
   /** Label of the given step. */
   @Input() label: MatStepLabel | string;
 
-  /** Alert message when there's an error. */
-  @Input() alertMessage: string;
+  /** Error message to display when there's an error. */
+  @Input() errorMessage: string;
 
   /** Overrides for the header icons, passed in via the stepper. */
   @Input() iconOverrides: {[key: string]: TemplateRef<MatStepperIconContext>};

src/lib/stepper/stepper-horizontal.html

@@ -17,7 +17,7 @@
                      [selected]="selectedIndex === i"
                      [active]="step.completed || selectedIndex === i || !linear"
                      [optional]="step.optional"
-                     [alertMessage]="step.alertMessage"
+                     [errorMessage]="step.errorMessage"
                      [iconOverrides]="_iconOverrides">
     </mat-step-header>
     <div *ngIf="!isLast" class="mat-stepper-horizontal-line"></div>

src/lib/stepper/stepper-vertical.html

@@ -16,7 +16,7 @@
                    [selected]="selectedIndex === i"
                    [active]="step.completed || selectedIndex === i || !linear"
                    [optional]="step.optional"
-                   [alertMessage]="step.alertMessage"
+                   [errorMessage]="step.errorMessage"
                    [iconOverrides]="_iconOverrides">
   </mat-step-header>