Linear stepper without a form

[theunreal]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

Assign a condition for a step to be completed manually (form-independent)

What is the current behavior?

No option to mark step as completed without a form

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

Fit more use cases

Is there anything else we should know?

for example:

<mat-horizontal-stepper formArrayName="formArray" linear [completed]="items.length">

[acvdb]

If a step doesn't contain a form, the following exception is thrown:

ERROR TypeError: Cannot read property 'invalid' of undefined
    at stepper.es5.js:375
    at Array.some (<anonymous>)
    at MatHorizontalStepper.webpackJsonp.../../../cdk/esm5/stepper.es5.js.CdkStepper._anyControlsInvalid (stepper.es5.js:375)
    at MatHorizontalStepper.set [as selectedIndex] (stepper.es5.js:206)
    at MatHorizontalStepper.webpackJsonp.../../../cdk/esm5/stepper.es5.js.CdkStepper.next (stepper.es5.js:240)
    at Object.eval [as handleEvent] (AppComponent.html:25)
    at handleEvent (core.es5.js:11998)
    at callWithDebugContext (core.es5.js:13467)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13055)
    at dispatchEvent (core.es5.js:8614)

[crisbeto]

This should be possible already, can somebody confirm? It no longer throws an arrow when the stepControl is undefined and there's been a completed input on the step all along.

EDIT: Just double-checked. While the completed property is there, it's not being considered when the user tries to move to another step. I've submitted a PR to address it.

[Dannythm]

Sorry to comment on an already closed issue, but I think I get what @theunreal was aiming to, that is, to have a stepper that does not rely on form validators to be advanced.

Check this stackblitz: https://stackblitz.com/edit/mat-horizontal-stepper?file=app%2Fapp.component.html

I've marked the stepper as linear, and the first step as not optional, still, regardless of it, you can click and go to the step 2 at any time, without having to click the "compelte" button to mark step 1 as completed, also ot seen in there, when I try in my local environment to do the same I get the following error when clicking the complete button:

SearchComponent.html:62 ERROR TypeError: _co.compelte is not a function
    at Object.eval [as handleEvent] (SearchComponent.html:62)
    at handleEvent (core.js:13532)
    at callWithDebugContext (core.js:15041)
    at Object.debugHandleEvent [as handleEvent] (core.js:14628)
    at dispatchEvent (core.js:9944)
    at eval (core.js:10569)
    at HTMLButtonElement.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.js:4724)
    at ZoneDelegate.invokeTask (zone.js:397)
    at Zone.runTask (zone.js:165)
    at HTMLButtonElement.ZoneTask.invoke (zone.js:460)

My use case is to have a stepper that on each step present the user certain options, and they have to select one of them with a button, then proceed to the following step, but not allow them to advance if there is no selection. If thsi is not possible I can think a redesign that uses forms but I really think I don't need to have forms for this use case, but I'm failing to achieve it so far.

Please correct me if I'm using any component the wrong way.

[Maistho]

@Dannythm Looks like you need to bind to [completed]. See this modification of your stackblitz:

https://stackblitz.com/edit/mat-horizontal-stepper-5d2ttr

[Dannythm]

@Maistho Ah, so the properties can't be used directly, they need binding, oh well I feel dumb now. Anyway I'm glad it's something silly and not an actual non functionallity/bug. Thank you!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}