mardi 12 février 2019

Can a mat-checkbox be used as a matStepperNext?

I want a step within a stepper to have an agreement, but don't want the extra button that says "I agree with what I just checked to agree to". Just click on the checkbox and go.

Using the standard Angular example, I swapped out the button for a checkbox and the stepper doesn't move forward.

<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  
</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>

Expect to click the checkbox and have the stepper move directly to step 2.




Aucun commentaire:

Enregistrer un commentaire