Components: Stepper completes steps when component based forms are invalid

[sam11385]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Linear Stepper should see invalid forms from component and NOT move upon click of "matStepperNext" button.

What is the current behavior?

Linear Stepper thinks component based forms are valid so it moves to next step.

What are the steps to reproduce?

Stackblitz: https://stackblitz.com/edit/angular-material2-issue-mjmu9u?file=app/app.component.ts

Here is a github Repo where I use angular forms in 3 different components, and use the main app component as the stepper. I want to use the stepper to go from form to form using the linear method: https://github.com/sam11385/ng-forms

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

I have forms in different components (component-a, component-b, component-c). In my main container component (container-component) I want to have linear stepper that 'steps' through each component when their forms are valid. This behavior is similar to wizard functionality.

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

Package JSON contents:
"@angular/cdk": "^2.0.0-beta.12",
"@angular/common": "^4.3.4",
"@angular/compiler": "^4.3.4",
"@angular/compiler-cli": "^4.3.4",
"@angular/core": "^4.4.3",
"@angular/forms": "^4.3.4",
"@angular/http": "^4.3.4",
"@angular/material": "^2.0.0-beta.12",

Is there anything else we should know?

[amcdnl]

Your example looks incorrect. In your markup you have:

  <mat-step [stepControl]="registerForm">
    <ng-template matStepLabel>Thoughtram</ng-template>
    <app-thoughtram #registerForm></app-thoughtram>

it should be:

  <mat-step [stepControl]="registerForm.registerForm">
    <ng-template matStepLabel>Thoughtram</ng-template>
    <app-thoughtram #registerForm></app-thoughtram>

When I did this, it did not let me proceed as desired.

[mmalerba]

@amcdnl is correct, registerForm refers to the ThoughtramComponent (perhaps a better name for it would be thoughtram) to get the actual control you need to add .registerForm

I recommend:

  <mat-step [stepControl]="thoughtram.registerForm">
    <ng-template matStepLabel>Thoughtram</ng-template>
    <app-thoughtram #thoughtram></app-thoughtram>

[sam11385]

Thanks for the help on this. Why does it need to be entered in twice like that?

Also, I used the generated name of the component via the CLI. But thanks for suggesting how I name component.s

[cnlawrence]

I'm having a hard time figuring out what to use for components labled as step-one-component. I've tried several variations.

<mat-horizontal-stepper linear #stepper>
<mat-step [stepControl]="frmStepOne">
<ng-template matStepLabel>Step One Details</ng-template>
<step-one-component #steponecomponent></step-one-component>
</mat-step>
<mat-step [stepControl]="frmStepTwo">
<ng-template matStepLabel>Step Two Details</ng-template>
<step-two-component #steptwocomponent></step-two-component>
</mat-step>
<mat-step [stepControl]="frmStepThree">
<ng-template matStepLabel>Step Three Details2</ng-template>
<step-three-component #stepthreecomponent></step-three-component>
</mat-step>
</mat-horizontal-stepper>

[cnlawrence]

Here is an example. https://stackblitz.com/edit/angular-umvpjs

[reonbs]

Hello all:

I am having the below challenge. Would it be possible for me to pass a stepper id into a form function.
my reason for this is to move the stepper next programmatically. rather than using a button.

<mat-step [stepControl]="frmStepOne">

submit

[reonbs]

Hello all:

I am having the below challenge. Would it be possible for me to pass a stepper id into a form function.
my reason for this is to move the stepper next programmatically. rather than using a button.
<mat-horizontal-stepper linear #stepper>
<form class="form" (ngSubmit)="onInitiate(stepper)" #onInitiateTransactionForm="ngForm"> <button type="submit">submit</button> </form> </mat-step> </mat-horizontal-stepper>

[angular-automatic-lock-bot[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._}