How to move stepper from one step to second step using angular and angular material

Question

I have 2 - 4 step form. I had separate out the form like below structure. First there is auth folder under then there register folder. Under this register - register.ts and register.html. Under register.html I had implemented mat stepper like below :

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

                    <mat-step [stepControl]="firstFormGroup">
                      <form [formGroup]="firstFormGroup">
                        <ng-template matStepLabel> step 1 </ng-template>
                        <mat-card class="example-card">
                                <mat-card-header>
                                    <div mat-card-avatar class="example-header-image"></div>
                                    <mat-card-title>step 1</mat-card-title>
                                </mat-card-header>
                                <mat-card-content>
                                        <kt-stepone></kt-stepone>
                                </mat-card-content>

                        </mat-card>

                        <div>

                        </div>
                      </form>
                    </mat-step>

                    <mat-step [stepControl]="secondFormGroup">
                      <form [formGroup]="secondFormGroup">
                        <ng-template matStepLabel> step 2 </ng-template>
                            <mat-card class="example-card">
                                <mat-card-header>
                                    <div mat-card-avatar class="example-header-image"></div>
                                    <mat-card-title>step 2</mat-card-title>
                                </mat-card-header>
                                <mat-card-content>
                                        <kt-steptwo></kt-steptwo>
                                </mat-card-content>
                            </mat-card>

                      </form>
                    </mat-step>

under my register.ts :

export class RegisterComponent implements OnInit, OnDestroy {
  isLinear = true;
}

Now this <kt-stepone> is my step 1 form which is separate module and there I implemented the Next button.

Now when I implemented isLinear = true; then even after filling the whole form its not going on next step. If I didnt fill the form then its working as per expection highligting the fileds with red

For ref, here is <kt-stepone>code :

<form class="kt-form" [formGroup]="steponeForm" autocomplete="off" (ngSubmit)="onSubmit()">
            <div class="kt-portlet__body" >
                //MY FORM
            </div>
                 // submit button
            <button mat-button matStepperNext color="primary" type="submit">Next</button>

</form>

Since I am using angular for first time, please tell me where I am making mistake in this approach.

Updated KT-STEPONE.ts:

import { MatStepper } from '@angular/material/stepper';
completed=false;
@ViewChild('stepper') stepper: MatStepper;
onSubmit(){

    this.stepper.selected.completed = true;
    this.stepper.next();
  }

score 1 · Answer 1 · answered Apr 26 '19 at 10:56

1

I think that your stepper and kt-stepone are not comunicating. try implement a service or a @inpit @output to set step valid. or if your logic is separated you can remove the [stepControl] and set completed="false" and in your component

@ViewChild('stepper') stepper: MatStepper;
onButton() {
  this.stepper.selected.completed = true;
  this.stepper.next();
}

answered Apr 26 '19 at 10:56

Lean Pilar

327
7
13

Where should I include `@ViewChild('stepper') stepper: MatStepper;` . Should I include this before constructor in class OR before class itself ? Also, MatStepper means its MatStepperModule ? @Lean Pilar – Mohammed Sabir Apr 26 '19 at 11:25
Please find the updated kt-stepone.ts as per your instructions. but it going in next step even if fields are empty @Lean Pilar – Mohammed Sabir Apr 26 '19 at 11:30
inside the class before constructor in class where you use the mat-horizontal-stepper – Lean Pilar Apr 26 '19 at 11:31
mat-horizontal-stepper is in my main register.html. From mat-horizontal-stepper, I removed the `[stepControl]`. where should I add `completed="false"`, I mean which ts file: register or kt-stepone @Lean Pilar – Mohammed Sabir Apr 26 '19 at 11:35
replace [stepControl]=... with completed="false". but if you don't have button on the stepper but onli iinside try to emit and event from the kt-stepone to the stepper to listen for the event and trigger the onButton function – Lean Pilar Apr 26 '19 at 11:46
Ok will try to do this. It will be helpful if you can you help me out with an example. – Mohammed Sabir Apr 26 '19 at 11:48

score 1 · Accepted Answer · answered Apr 29 '19 at 05:37

1

After RnD over this. I had finally got the working solution of this. Please follow this link. The way to do this is : We need to link up the every step component in register component. Here is the guide for this.

answered Apr 29 '19 at 05:37

Mohammed Sabir

354
1
4
16

score 0 · Answer 3 · answered Jan 13 '21 at 12:18

<mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel> step 1 </ng-template>
        <mat-card class="example-card">
            <mat-card-header>
                <div mat-card-avatar class="example-header-image"></div>
                <mat-card-title>step 1</mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <kt-stepone></kt-stepone>
            </mat-card-content>

        </mat-card>

        <div>

        </div>
    </form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel> step 2 </ng-template>
        <mat-card class="example-card">
            <mat-card-header>
                <div mat-card-avatar class="example-header-image"></div>
                <mat-card-title>step 2</mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <kt-steptwo></kt-steptwo>
            </mat-card-content>
        </mat-card>

    </form>
</mat-step>

How to move stepper from one step to second step using angular and angular material

3 Answers3