可以将 mat-checkbox 用作 matStepperNext 吗？

Posted 2023-02-23

【中文标题】可以将 mat-checkbox 用作 matStepperNext 吗？

【英文标题】：Can a mat-checkbox be used as a matStepperNext?

【发布时间】：2019-07-06 18:03:16

【问题描述】：

我希望步进器中的一个步骤达成一致，但不希望显示“我同意我刚刚检查同意的内容”的额外按钮。只需点击复选框即可。

使用标准的 Angular 示例，我将按钮换成了复选框，步进器不会向前移动。

<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  !isLinear ? 'Enable linear mode' : 'Disable linear mode'
</button>
<mat-vertical-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Agree with Terms</ng-template>
      <div>
        <mat-checkbox matStepperNext formControlName="firstCtrl" required> I agree </button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-vertical-stepper>

希望单击复选框并让步进器直接移动到第 2 步。

【参考方案1】：

我想通了。关键字 matStepperNext 似乎不适用于复选框。但是，如果在复选框 html 中，您在步进器的 div 中包含 #stepper...

<mat-vertical-stepper #stepper [linear]="isLinear">you include a (change) event calling a function...

您可以添加一个（更改）事件来调用具有该名称的函数...

<mat-checkbox matStepperNext (change)="goForward(stepper);" formControlName="firstCtrl" required> I agree </button>

然后，在 .ts 中，确保包含...

import  MatStepper  from '@angular/material/stepper';

...然后添加这个函数...

  goForward(stepper: MatStepper)
    stepper.next();
  

当您单击复选框时，它应该会进入下一步。

【讨论】：

当线性为真时这是否也有效？对我来说似乎不是。