Пропустить шаг в угловом материале степпера (в зависимости от некоторых условий)

Question

У меня есть угловая страница со степпером Angular Material, где содержимое каждого шага находится внутри независимого компонента:

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="policyholder" state="phone">
    <ng-template matStepLabel>
     <span class="d-none d-sm-block">Policyholder</span>
    </ng-template>
    <policyholder></policyholder>
  </mat-step>

  <mat-step [stepControl]="policydetails">
    <ng-template matStepLabel><span class="d-none d-sm-block">Policy Details</span></ng-template>
    <policydetails></policydetails>
  </mat-step>

  <mat-step [stepControl]="paymentdetails">
    <ng-template matStepLabel><span class="d-none d-sm-block">Payment Details</span></ng-template>
    <paydetails></paydetails>
  </mat-step>
...
</mat-horizontal-stepper>

Каждый шаг имеет несколько форм с различными полями (ввод, выбор и т. Д.).

Мой вопрос - в зависимости от какой-либо опции выбора внутри шага 1, можно ли пропустить шаг 2 и перейти непосредственно к шагу 3? Например, только если «yesOption» выбрано ниже?

Или, как вариант, сделать Шаг 2 невидимым, может быть?

<mat-form-field appearance="outline" class=“someClass”>
  <mat-label>Some Condition</mat-label>

  <mat-select placeholder=“Some Select“ formControlName="someControl">
    <mat-option value=“yesOption”>Yes</mat-option>
    <mat-option value=“noOption”>No</mat-option>
  </mat-select>

</mat-form-field>

В настоящее время я переключаюсь на следующий шаг, как показано ниже:

<button class="someClass" type="submit" [disabled]="policyholderForm.invalid" mat-button matStepperNext>Next Step</button>

Я пытался использовать selectedIndex, чтобы решить эту проблему, но это не сработало. Посоветуйте, пожалуйста, как это можно сделать, заранее спасибо!

Answer 1

Вы можете сделать с *ngIf. Установите значение логического флага enableStep2 на основе значения, выбранного на шаге 1.

<mat-step [stepControl]="policydetails" *ngIf="enableStep2">
    <ng-template matStepLabel><span class="d-none d-sm-block">Policy Details</span></ng-template>
    <policydetails></policydetails>
  </mat-step>