Prefilled form for linear stepper doesn't allow one to click on all steps

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

A linear stepper whose associated form is populated using patchValue or setValue and is valid should allow you to click on any of the steps right away.

What is the current behavior?

I have to keep pressing the “next” button as I am restricted to clicking on steps I have visited and the one immediately after.

What are the steps to reproduce?

1. Create a linear stepper with > 3 steps
2. Associate the stepper with a form and each step with a form group
3. Programmatically patch the value of the form groups associated with the steps to a valid state
4. Not all steps on the stepper are clickable even though the form and the groups are valid

What is the use-case or motivation for changing an existing behavior?

Saving the user’s progress for a long form and returning them to the step they left off on.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I’m on Angular 5.2.3, Angular Material 5.2, MacOS, TS 2.4.2.

[andymockli]

Also having this problem in Angular 6.0.1, Material 6.0.2, TS 2.7.2. It was working as @MrSnappingTurtle and I expected in version 2.0.0-beta.12 however.

This issue makes the stepper only usable in “create” mode and not “edit” mode. Which is to say it’s not very usable as a UI component at all when [linear]=“true”. We’re making the move to upgrade to 6.0, but this issue is making me have to rethink our whole UX around our forms.

Is there anything I can do to help get this fixed?

[vamsikrrish]

A temporary workaround for this might be like this:

HTML:

<mat-horizontal-stepper  #stepper (animationDone)="setAllMatStepsAsInteracted()" linear>
.
.
.
</mat-horizontal-stepper>

TypeScript:

  @ViewChild('stepper') formStepper: MatStepper;
setAllMatStepsAsInteracted(){
  this.formStepper.steps.forEach((matStep : CdkStep)=>{
    matStep.interacted=true;
  });
}

Note 1: You might decide to check for the validity of each step before u set the stepper as interacted(completely fail safe)

Note 2 : Using completed instead of interacted also works.