Угловой шаговый материал со следующей кнопкой в ​​заголовке

Question

Я пытаюсь изменить матовый степпер с помощью следующей кнопки вместе с заголовками степпера. Мои текущие шаги выглядят так:

  <mat-step  label="Details" state="details" fxFlex="100" [stepControl]="secondForm">
    <ng-container *ngTemplateOutlet="stepTwo"></ng-container>
  </mat-step>

  <mat-step  label="Options" state="options" fxFlex="100" [stepControl]="thirdForm">
    <ng-container *ngTemplateOutlet="stepThree"></ng-container>
  </mat-step>

  <mat-step label="Review" state="review" fxFlex="100"  editable="false">
    <ng-container *ngTemplateOutlet="stepFour"></ng-container>
  </mat-step>

  <mat-step >
      <ng-template matStepLabel>
          <p (click)="stepChange()"><mat-icon >{{nextIndexIcon}}</mat-icon>{{nextIndexName}}<mat-icon>arrow_forward_ios</mat-icon>Step {{stepnumber}}
          of 5</p>
      </ng-template>
      <ng-container *ngTemplateOutlet="stepFive"></ng-container>
    </mat-step>

Четвертый шаг изменен, чтобы вести себя каккнопка следующего шага, как указано выше.Он работает как задумано (почти). Теперь проблема в том, что мой второй из последнего шага не имеет формы и не имеет никаких проверок.Я хочу сделать обязательным для пользователя просмотр этого шага, даже если он не имеет форм.В настоящее время он пропускает этот шаг и переходит к последнему шагу.