Showing an alert msg when clicking on stepper titles in Angular 10-CodePudding

I want to show an alert when the user clicks on the second stepper 'Fill out your address'. The form filed will show red border colour if it's empty, on the same time I want to show an alert msg too. I have created the function 'onSubmit'. the 'Next' button is triggering the onSubmit function, I want to trigger the same function if the user clicks on the second stepper title as well.

            <mat-horizontal-stepper [linear]="true" #stepper>
            <mat-step [stepControl]="firstFormGroup">
                <form [formGroup]="firstFormGroup">
                <ng-template matStepLabel>Fill out your name</ng-template>
                <mat-form-field>
                    <mat-label>Name</mat-label>
                    <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
                </mat-form-field>
                <div>
                    <button mat-button matStepperNext>Next</button>
                </div>
                </form>
            </mat-step>
            <mat-step [stepControl]="secondFormGroup" label="Fill out your address">
                <form [formGroup]="secondFormGroup">
                <mat-form-field>
                    <mat-label>Address</mat-label>
                    <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
                        required>
                </mat-form-field>
                <div>
                    <button mat-button matStepperPrevious>Back</button>
                    <button mat-button matStepperNext>Next</button>
                </div>
                </form>
            </mat-step>
            <mat-step>
                <ng-template matStepLabel>Done</ng-template>
                <p>You are now done.</p>
                <div>
                <button mat-button matStepperPrevious>Back</button>
                <button mat-button (click)="stepper.reset()">Reset</button>
                </div>
            </mat-step>
            </mat-horizontal-stepper>

CodePudding user response：

Use "selectionChange" output event on mat-horizontal-stepper

<mat-horizontal-stepper (selectionChange)="onChange($event)" [linear]="true" #stepper>

in your onChange method you can catch the clicked step by the selectedIndex or the object passed through the event.

onChange(e: StepperSelectionEvent) {

if (e.selectedIndex == 1) {
  // alert or do something
}

}

In your steps order the index of your address step is 1. You can also access the address step object by the property "selectedStep" on the event.

https://material.angular.io/components/stepper/api#MatHorizontalStepper

Unfortunately the angular mat documentation says that the MatHorizontalStepper object is deprecated. You might need to check on alternatives in the future.

I have already tested it on stackBlitz and it worked for me.