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>

Answer 1

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.