CODEWITHSUNDEEP
angularangular-material
Alessandro Celeghin
Alessandro Celeghin

Reputation: 4189

Material stepper prevent navigating with enter

In my angular 4 project I am using a material stepper stepper/overview In the first page of the stepper I have a form with many fields, but if I click into a field and then click Enter it goes to the next page, and I don't want it, I want to navigate only with the button.

<mat-horizontal-stepper [linear]="true" class="custom-stepper col-lg-12" #stepper>
    <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="firstFormGroup">
            <ng-template matStepLabel> {{'ticket.new.stepper.first' | translate }} </ng-template>

            /*
            *....fields
            /*

           <div class="row">
            <div class="col-md-12">
                <button mat-button matStepperNext class="btn btn-info btn-round pull-right">
                        {{ 'ticket.new.buttons.next' | translate}}
                    <span class="btn-label">
                     <i class="material-icons">keyboard_arrow_right</i>
                    </span>
                </button>
            </div>
            </div>
         </form>
    </mat-step>

   <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>{{'ticket.new.stepper.second' | translate }}</ng-template>


        //...other fields

            <div class="row">
                <div class="col-md-12">
                    <button mat-button matStepperPrevious class="btn btn-round">
                        <span class="btn-label">
                            <i class="material-icons">keyboard_arrow_left</i>
                        </span>{{ 'ticket.new.buttons.back' | translate}}
                                    </button>


                    <button mat-button class="btn btn-info btn-round pull-right" (click)="save()">
                        <span class="btn-label">
                            <i class="material-icons">check</i>
                        </span>{{ 'ticket.new.buttons.save' | translate}}
                    </button>

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

Upvotes: 1

Views: 1958

Answers (1)

Janardhan
Janardhan

Reputation: 386

Just put (keydown.enter)="false" on the form tag

Check here: https://stackblitz.com/edit/angular-jowmrd?file=app%2Fapp.component.html

Upvotes: 3

Related Questions