禁用mat-step标题按钮

Question

我想禁用最终的mat-step标题按钮，以便用户无法通过单击导航到最终页面。这是相关代码：

<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

您应该将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"

Answer 2

当您使用formGroup执行这些步骤时，可以阻止最后一步

finalStep: MatStep
 finalStep.reset()

这将步骤重置为其初始状态。请注意，这包括重置表单数据，前提是前一步骤的formGroup也无效