Material stepper prevent evaluating angular 5

Question

In my angular 5 project I have a material-stepper. My stepper has 2 pages, the first page has 2 buttons, one is the next button to go to the next stepper page if the form in the page is correct.

<button mat-button matStepperNext (click)="sendFareRequest()" 
   class="btn btn-info btn-round pull-right">next
        <span class="btn-label">
            <i class="material-icons">keyboard_arrow_right</i>
        </span>
</button>

The second button have to open a modal (sweetalert), but in this case I see all the required fields in the stepper page highlighted in red, like if the form is evaluated, I don't want this, the second button doesn't have the matStepperNext So I don't know why this happening.

<button mat-button (click)="alertTicketMissing()" class="btn btn-label btn-round">
    {{ 'ticket.new.buttons.numberpassnotfound' | translate}}
    <span class="btn-label">
        <i class="material-icons">close</i>
    </span>
</button>

Clicking on the stepper itself (eg, the 1 2 3) buttons still triggers it. How are you able to prevent that behavior? — Ka Mok

Pierre Mallet Pierre Mallet · Accepted Answer · 2018-02-08T15:19:46

You have a set a type="button" on your button triggering the alert. By default all button without a type behaves like a submit button, thus submit the form.

Material stepper prevent evaluating angular 5

1 Answers