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

您应将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也无效

禁用垫步标题按钮

2 个答案: