diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts index 53e719a0b3ca..e4d1c0939fd6 100644 --- a/src/cdk/stepper/stepper.ts +++ b/src/cdk/stepper/stepper.ts @@ -126,7 +126,10 @@ export class CdkStep implements OnChanges { /** Resets the step to its initial state. Note that this includes resetting form data. */ reset(): void { this.interacted = false; - this.completed = false; + + if (this._customCompleted != null) { + this._customCompleted = false; + } if (this.stepControl) { this.stepControl.reset(); diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts index db76d89f6f9d..8f13b9609d37 100644 --- a/src/lib/stepper/stepper.spec.ts +++ b/src/lib/stepper/stepper.spec.ts @@ -318,6 +318,10 @@ describe('MatHorizontalStepper', () => { it('should be able to reset the stepper to its initial state', () => { assertLinearStepperResetable(fixture); }); + + it('should not clobber the `complete` binding when resetting', () => { + assertLinearStepperResetComplete(fixture); + }); }); }); @@ -493,6 +497,10 @@ describe('MatVerticalStepper', () => { it('should be able to reset the stepper to its initial state', () => { assertLinearStepperResetable(fixture); }); + + it('should not clobber the `complete` binding when resetting', () => { + assertLinearStepperResetComplete(fixture); + }); }); }); @@ -971,6 +979,38 @@ function assertLinearStepperResetable( } +/** Asserts that the `complete` binding is being reset correctly. */ +function assertLinearStepperResetComplete( + fixture: ComponentFixture) { + + const testComponent = fixture.componentInstance; + const stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; + const steps: MatStep[] = stepperComponent._steps.toArray(); + const fillOutStepper = () => { + testComponent.oneGroup.get('oneCtrl')!.setValue('input'); + testComponent.twoGroup.get('twoCtrl')!.setValue('input'); + testComponent.threeGroup.get('threeCtrl')!.setValue('valid'); + testComponent.validationTrigger.next(); + stepperComponent.selectedIndex = 2; + fixture.detectChanges(); + stepperComponent.selectedIndex = 3; + fixture.detectChanges(); + }; + + fillOutStepper(); + + expect(steps[2].completed) + .toBe(true, 'Expected third step to be considered complete after the first run through.'); + + stepperComponent.reset(); + fixture.detectChanges(); + fillOutStepper(); + + expect(steps[2].completed) + .toBe(true, 'Expected third step to be considered complete when doing a run after a reset.'); +} + + @Component({ template: `