Question

在我的角度4项目中，我正在使用物料步进器stepper/overview 在步进器的第一页中，我有一个包含许多字段的表单，但如果我单击一个字段然后单击Enter它将转到下一页，我不想要它，我只想用按钮导航。

<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>

Answer 1

只需将(keydown.enter)="false"放在输入标记

上

点击此处：https://stackblitz.com/edit/angular-jowmrd?file=app%2Fapp.component.html

材料步进器阻止使用enter导航

1 个答案: