Можно ли использовать mat-checkbox как matStepperNext? - PullRequest
Новая
       2

Можно ли использовать mat-checkbox как matStepperNext?

0 голосов
/ 13 февраля 2019

Я хочу, чтобы шаг в степпере имел соглашение, но не хочу, чтобы дополнительная кнопка с надписью «Я согласен с тем, что я только что проверил, согласилась».Просто нажмите на флажок и перейдите.

Используя стандартный пример 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 Ответ

0 голосов
/ 14 февраля 2019

Я понял это.Ключевое слово matStepperNext, по-видимому, неприменимо к флажкам.Однако, если в флажке HTML, где вы включаете #stepper в div вашего степпера ... 

<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();
  }

КогдаВы нажимаете флажок, он должен перейти к следующему шагу.

...