Вам не обязательно обязательно использовать matStepperNext как здесь:
<button mat-button matStepperNext>Next</button>
Но вместо этого вы можете использовать свою собственную функцию следующим образом:
<button mat-button (click)="moveToNextStep()">Next</button>
и в вашем ts-файле получите экземпляр вашего степпера следующим образом:
@ViewChild('stepper') stepper: MatStepper;
Это после того, как вы добавили переменную шаблона в ваш html следующим образом:
<mat-horizontal-stepper [linear]="true" #stepper>
Тогда ваш moveToNextStep() должен выглядеть так:
public moveToNextStep(): void {
// Here make your api call and your form validation
if ( your all is good move to next step) {
this.stepper.next(); // <==== that's how you trigger moving to next step manually
} else {
//display some message to the user
}
}
И, конечно, вы можете сделать то же самое с предыдущим, вот так:
<button mat-button (click)="moveToPreviousStep()">Previous</button>
public moveToPreviousStep(): void {
this.stepper.previous();
}
Использование вкладок заголовка:
Если вам нужно использовать шаговый заголовок для переключения между шагами, вы можете использовать selectionChange следующим образом:
<mat-horizontal-stepper #stepper (selectionChange)="onStepChange(stepper.selectedIndex)">
А затем вы добавляете свою функцию, которая обрабатывает вызов API, проверку формы и переход к следующему шагу или нет; как то так:
public onStepChange(index: number): void {
if ( your all is good move to next step) {
this.stepper.next(); // <==== that's how you trigger moving to next step manually
} else {
//display some message to the user
}
}