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

[BovineEnthusiast]

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?

[andymockli]

So it looks like this was changed on purpose to fix 8667 in commit PR 10048.

To me this seems like the wrong solution to the problem. In the case that was made for #8667, the example was a prefilled out billing address form, which would be considered valid and thus not require the user to visit that step. In my view, the fix to that problem is to add a new form-control to the billing address form that is tantamount to a required "I acknowledge" checkbox, not to change the mat-stepper behavior and have it make distinctions about whether the form is _really_ valid.

The tie to "stepControl" or "completed" is the right one. If a consumer of this library needs to have edge-case logic about what completed actually means, it should be done by them through the "stepControl" or "completed" interface.

Maybe a middleground solution is to allow for "completed" to be either a boolean or a (CdkStepper) => boolean that can be called to determine any special edge-case behavior like the example in 8667?

[andymockli]

Any thoughts on this? Would a PR be wanted?

[BovineEnthusiast]

@andymockli Given that this was assigned p4 priority, I don't think we'll get a response any time soon.

[VikramVasudevan]

any update on this one? I have hit this issue as well and would be great to hear if there has been any progress on this .. linear stepper is pretty useless to me otherwise.

[vamsikrrish]

Facing the same issue while developing an update form. Badly looking to fix this without going to handle the buttons by myself just to ensure maintainability.

[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.