Отключить кнопку заголовка шага коврика

Question

Я бы хотел отключить работу кнопки заголовка финального шага, чтобы пользователь не мог перейти на последнюю страницу, нажав на нее. Это соответствующий код:

<mat-horizontal-stepper [linear]="true" #stepper>
  <mat-step>
    <ng-template matStepLabel>Type</ng-template>
    <app-campaign-usage-mode [model]=model (stepNext)="stepper.next()"></app-campaign-usage-mode>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Details</ng-template>
    <app-campaign-details [model]=model (stepNext)="stepper.next()"></app-campaign-details>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Schedule</ng-template>
    <app-campaign-schedule [model]=model (stepNext)="stepper.next()"></app-campaign-schedule>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Creatives</ng-template>
    <app-campaign-creatives [model]=model (stepNext)="stepper.next()"></app-campaign-creatives>
  </mat-step>
  <mat-step [stepControl]="enabled">
    <ng-template matStepLabel>Review</ng-template>
    <app-campaign-confirm [model]=model (stepEdited)="stepper.selectedIndex = $event" (stepNext)="stepper.next()"></app-campaign-confirm>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    <app-campaign-step9></app-campaign-step9>
  </mat-step>
</mat-horizontal-stepper>

Последний шаг - это тот, который я хочу отключить.

Спасибо

Answer 1

Поскольку вы используете formGroup для шагов, вы можете заблокировать последний шаг с помощью

finalStep: MatStep finalStep.reset() Это сбрасывает шаг в исходное состояние. Обратите внимание, что это включает в себя сброс данных формы При условии, что formGroup предыдущего шага также недействительна

Answer 2

Вы должны объявить mat-horizontal-stepper как linear, так как он проверяет правильность предыдущих шагов. Также используйте completed в каждом mat-step, чтобы указать, помечен ли шаг как завершенный.

Затем на каждом шаге напишите обработчик щелчка, который будет вызывать функцию matStepClicked, которая изменит соответствующий логический флаг completed каждого шага.

    <mat-horizontal-stepper linear #matHorizontalStepper>
        <mat-step [completed]="isFirstStepDone">            
           <ng-template matStepLabel>Type</ng-template>
          <app-campaign-usage-mode [model]=model (click)="matStepClicked(matHorizontalStepper, "FirstStep")"></app-campaign-usage-mode>
        </mat-step>
        <mat-step [completed]="isSecondStepDone">
           <ng-template matStepLabel>Details</ng-template>
           <app-campaign-details [model]=model (click)="matStepClicked(matHorizontalStepper, "SecondStep")"></app-campaign-details>
        </mat-step>
        <mat-step [completed]="isThirdStepDone">
           <ng-template matStepLabel>Details</ng-template>
           <app-campaign-details [model]=model (click)="matStepClicked(matHorizontalStepper, "ThirdStep")"></app-campaign-details>
        </mat-step>
    </mat-horizontal-stepper>                              

Затем в файле .ts напишите обработчик кликов следующим образом:

  matStepClicked(stepper: MatStepper, step: string) {
    switch(step) {
      case("FirstStep"):
        // perform some tasks
        this.isFirstStepDone = true;
        break;
      case("SecondStep"):
        // perform some tasks
        this.isSecondStepDone = true;
        break;
      case("ThirdStep"):
        // perform some tasks
        this.isThirdStepDone = true;
        break;
      default:
        // perform some other tasks
        break;
    }
  }                      

Кроме того, не забудьте объявить эти завершенные флаги (т. Е. isFirstStepDone, isSecondStepDone) изначально как false.

Обратите внимание, что этот подход обработчика кликов больше подходит, если в файле .ts должна быть выполнена логика, в противном случае вы можете изменить значение этого логического флага из html следующим образом: (click)="isFirstStepDone = !isFirstStepDone" или (click)="isSecondStepDone= !isSecondStepDone"