mat-horizontal-stepper: Unable to set linear=true

[pyle]

Bug, feature request, or proposal:

Bug

What is the expected behaviour?

Stepper is linear and doesn't produce the below error.

What is the current behavior?

Stepper component throws errors when linear parameter is set to true.
Tested with dynamically generated steps and non-dynamic steps and same error occurs.

ERROR TypeError: Cannot read property 'invalid' of undefined
    at eval (VM808 cdk-stepper.umd.js:375)
    at Array.some (<anonymous>)
    at MatHorizontalStepper.CdkStepper._anyControlsInvalid (VM808 cdk-stepper.umd.js:375)
    at MatHorizontalStepper.set [as selectedIndex] (VM808 cdk-stepper.umd.js:206)
    at MatHorizontalStepper.set [as selected] (VM808 cdk-stepper.umd.js:230)
    at MatStep.CdkStep.select (VM808 cdk-stepper.umd.js:125)
    at Object.eval [as handleEvent] (VM994 MatHorizontalStepper.ngfactory.js:26)
    at handleEvent (VM801 core.umd.js:12055)
    at callWithDebugContext (VM801 core.umd.js:13525)
    at Object.debugHandleEvent [as handleEvent] (VM801 core.umd.js:13113)
    at dispatchEvent (VM801 core.umd.js:8647)
    at eval (VM801 core.umd.js:9258)
    at HTMLElement.eval (VM791 platform-browser.umd.js:2685)
    at e.invokeTask (VM1088 zone.min.js:1)
    at Object.onInvokeTask (VM801 core.umd.js:3913)

What are the steps to reproduce?

Recreated basic Stepper component in this plunker with a few example:
http://plnkr.co/edit/mES0H2nKfYjfcrUOHexz

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

N/A

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

angular/material 2.0.0-beta.12

Is there anything else we should know?

[christikaes]

Looks like the issue you are seeing is because you haven't setup the stepControl attribute. With the linear flow the stepControl is checked for validity before allowing the user to proceed to the next step. More info at the docs here: https://material.angular.io/components/stepper/overview#linear-stepper

I initially stumbled on this as well-would it be possible to catch the error when stepControl is not specified in linear flow and throw a more descriptive message?

[pyle]

Ahh I see.
So in my case, I don't want to treat the stepper as a form but rather listen to the selectionChange events and use routes; I could just create a dummy AbstractControl for this but it seems a little wasteful.

[Toub]

Interesting component, but very complex to use for custom behaviors.

Need to be able to change step and "completed" value manually.

[yusijs]

I'm seeing the same (or at least a similar) issue. I want some steps to be mandatory, and others to be optional. However, optional=true does nothing, and I still get the error described in the OP. Am I completely misreading the docs, or is there something off here?

[smlee]

So based on what I am reading does the completed and optional attributes not work? Because I am having trouble using completed and optional attributes. I have a dynamic form group where one of the control validators changes based on a checkbox value. It doesn't seem to properly update stepControl or errorState.

Edit
I actually forgot to call updateValueAndValidity()

[realharry]

I'm having the same issue. I include two forms (each as a component) from a different module as two separate steps in a stepper control. Everything I've tried with this setup ("matStepperNext", etc.) all works well except for this linear=true.

As shown in the screenshot, the form validation works. As indicated by the red label (and the grayed-out Next button), the first step form is currently not valid, and yet I can still click the second step.

[mmukkara]

I'm having the same issue. I include two forms (each as a component) from a different module as two separate steps in a stepper control. Everything I've tried with this setup ("matStepperNext", etc.) all works well except for this linear=true.

As shown in the screenshot, the form validation works. As indicated by the red label (and the grayed-out Next button), the first step form is currently not valid, and yet I can still click the second step.

I know this is an old post. I don't see any updates on Stepper component for a long time. Are you able to fix this issue? I am in a similar situation.

Thanks for the help

[silver-stack]

Hello, I know that this is an old post, however I am also having this issue. I am also using the mat-vertical-stepper. My errors trigger, however I am able to move onto the next step.

I am also using the mat-dialog so not sure if this is related or not? Example step:

`
<mat-vertical-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="customerFormGroup">
<form [formGroup]="customerFormGroup">

<button
[disabled]="!customerFormGroup.valid"
matStepperNext mat-raised-button color="primary" type="submit" name="butt">

arrow_downwardNext

</form>

`

[nicolae-olariu]

Hi guys, same error here. Trying to use a mat-vertical-stepper but linear input doesn't work. It always treats it as false no matter if I set it to true. I've even copy/pasted the mat-vertical-stepper from official docs into my project with the same result. Any ideas?

Thank you in advance!

P.S. Here is a snapshot of my package.json file:

    "@angular/animations": "^9.1.0",
    "@angular/cdk": "^9.1.3",
    "@angular/common": "^9.0.7",
    "@angular/compiler": "^9.0.7",
    "@angular/core": "^9.0.7",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "^9.0.7",
    "@angular/material": "^9.2.0",
    "@angular/platform-browser": "^9.0.7",
    "@angular/platform-browser-dynamic": "^9.0.7",
    "@angular/router": "^9.0.7",

[nicolae-olariu]

Never mind guys. Once I made one of the formControls inside that specific step (formGroup) required, it started to work as designed: it no longer lets you click to the next step until you fix the validation. Thanks and sorry!