Angular Material beta 0.12 mat-steper dont go to next step

Question

When I press next button the stepper doesn't go to the next step what I am missing ??

my.component.html

 <mat-horizontal-stepper #stepper [linear]="false">

    <mat-step [stepControl]="firstFormGroup">
      <form [formGroup]="firstFormGroup">
          <ng-template matStepLabel>Fill out your name</ng-template>
        <mat-form-field>
          <input matInput  placeholder="Last name, First name" formControlName="firstCtrl" required>
        </mat-form-field>
        <div>
          <button mat-button mdStepperNext>Next</button>
        </div>
      </form>
    </mat-step>

    <mat-step [stepControl]="secondFormGroup">
      <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>Fill out your address</ng-template>
        <mat-form-field>
          <input matInput  placeholder="Address" formControlName="secondCtrl" required>
        </mat-form-field>
        <div>
          <button mat-button mdStepperPrevious>Back</button>
          <button mat-button mdStepperNext>Next</button>
        </div>
      </form>
    </mat-step>

    <mat-step>
      <ng-template matStepLabel>Done</ng-template>
      You are now done.
      <div>
        <button mat-button mdStepperPrevious>Back</button>
      </div>
    </mat-step>
  </mat-horizontal-stepper>

my.component.ts file

constructor(
    private _formBuilder: FormBuilder
  ) { 

  // Steper vars
  isLinear = true;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;


  ngOnInit() {

    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });

    this.allDataload = 'active';

}

score 1 · Accepted Answer · answered Oct 16 '17 at 18:39

Under each md-step you need to keep matStepperPrevious and matStepperNext buttons where ever applicable

<mat-horizontal-stepper>
  <mat-step>

    <ng-template matStepLabel>Fill out your name</ng-template>

    <div>
      some thing on step 1
      <br/>
      <br>
      <button mat-raised-button color="accent" matStepperNext>Next</button>
    </div>

  </mat-step>
  <mat-step [stepControl]="secondFormGroup">

    <ng-template matStepLabel>Fill out your address</ng-template>

    <div>
      some thing on step 2
      <br>
      <button mat-raised-button color="primary" matStepperPrevious>Back</button>
       <!-----------------------------------below line ---------------->
      <button mat-raised-button color="accent" matStepperNext>Next</button>
    </div>

  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    Something on step 3
    <div>
      <button mat-raised-button color="primary" matStepperPrevious>Back</button>
    </div>
  </mat-step>

</mat-horizontal-stepper>

LIVE DEMO

score 0 · Answer 2 · answered Oct 16 '17 at 18:35

0

I fixed by renaming all the mdStepperNext with => matStepperNext

md > mat

answered Oct 16 '17 at 18:35

George C.

6,574
12
55
80

Don't write solved in title, just validate your own answer when you can – moodymudskipper Oct 16 '17 at 18:38

Angular Material beta 0.12 mat-steper dont go to next step

my.component.html

my.component.ts file

2 Answers2