Angular 2+: Mat Stepper stepcontrol binding doesn't work

Question

I have in my app a matStepper with its 2 first steps that look like this:

     <mat-step [stepControl]="actionFormGroup">...</mat-step>
     <mat-step [stepControl]="flightsFormGroup">
        <form [formGroup]="flightsFormGroup">
          <ng-template matStepLabel>Title</ng-template>
          <div class="central" fxLayoutGap="20px">
            <app-list-flights></app-list-flights>
            <div dir="rtl">
              <button mat-raised-button color="accent" (click)="checkValidation()">Next</button>
            </div>
          </div>
        </form>
      </mat-step>
<mat-step>...</mat-step>

In my typescript, the FormGroup declaration is like this:

export class NewReqComponent implements OnInit {

      actionFormGroup: FormGroup;
      flightsFormGroup: FormGroup;
      ngOnInit() {
        this.actionFormGroup = this._formBuilder.group({
          ctrl: ['', Validators.required]
        });
        this.flightsFormGroup = this._formBuilder.group({
          ctrl: [false, Validators.requiredTrue]
        });
      }
 }

My form control "ctrl" is modified by a few methods that set it true or false. However, even when it's true, I cannot go to the next step. In the first step, where I only have one input, it works well, as soon as the field is filled I can go to the next step.

Does anyone know where the problem comes from?

score 0 · Answer 1 · answered Apr 03 '18 at 16:50

After looking at the given details, you are missing the matStepperNext in the provided code.You can control the stepper to proceed further or not depending on valid status of the particular component through stepper index as mentioned above

With the given details , i am assuming this would resolve this issue,if not can you provide more details, git url if available.

<button mat-raised-button matStepperNext color="accent" (click)="checkValidation()">Next</button>

score 0 · Answer 2 · answered Mar 03 '20 at 22:16

Although it's not a direct answer to the question I think it might help others.

Here is an addition to the answer by Ahmed Jahanzaib

In order to get access to MatHorizontalStepper in the component, you need to add #stepper identifier (you can set any name you like)

<mat-horizontal-stepper ... #stepper>
  ...
</mat-horizontal-stepper>

Then inside of your component class you need to inject the MatStepper

import { MatStepper } from '@angular/material';
...
export class NewReqComponent implements OnInit {
  @ViewChild('stepper', { static: false }) stepper: MatStepper;

The first argument 'stepper' should be the same as the identifier #stepper in the HTML file.
The second argument {static: false|true} is required for Angular 8 only.
Now you can get access to it using this.stepper

score -1 · Answer 3 · edited Apr 03 '18 at 13:28

You need to wrap your Mat Stepper html like this:

<mat-horizontal-stepper [selectedIndex]="selectedIndexVal" (selectionChange)="doSomething($event)">
<mat-step [stepControl]="actionFormGroup">...</mat-step>
     <mat-step [stepControl]="flightsFormGroup">
        <form [formGroup]="flightsFormGroup">
          <ng-template matStepLabel>Title</ng-template>
          <div class="central" fxLayoutGap="20px">
            <app-list-flights></app-list-flights>
            <div dir="rtl">
              <button mat-raised-button color="accent" (click)="checkValidation()">Next</button>
            </div>
          </div>
        </form>
      </mat-step>
<mat-step>...</mat-step>
</mat-horizontal-stepper>

In your component class, make doSomething() like this:

public doSomething(event: StepperSelectionEvent) {
   this.stepper.selectedIndex= index;
}

Base on true and false, change the this.stepper.selectedIndex value respetively.

how you declared "stepper" in ts file can u please tell me – Santosh Raju May 01 '19 at 15:08 — Santosh Raju, May 01 '19 at 15:08

Angular 2+: Mat Stepper stepcontrol binding doesn't work

3 Answers3