Отключить предыдущие завершенные шаги на мат-степпере в углу 6

Question

Я работаю над проектом в Angular 6 с материалом Angular, и по одному конкретному маршруту у меня есть степпер с 6 ступенями, настроенный с isLinear=trueТаким образом, пользователь не может перейти к следующему шагу, пока не завершит фактический шаг и так далее.

Но когда дело доходит до шага 5, есть ли кнопка с некоторыми действиями, и после того, как пользователь нажмет эту кнопку, я хочу запретить пользователю возвращаться назад и изменять ранее заполненные данные.

Я уже отключил кнопку "Назад", но пользователь может вернуться к любому ранее выполненному шагу, щелкнув заголовок шага, который отображается в верхней части степпера.

Answer 1

Ты можешь использовать editable входной атрибут для mat-step как ниже. Делать editable как false при нажатии кнопки на последнем шаге, тогда предыдущие шаги больше не будут редактироваться

В файле шаблона

<div fxLayout>
  <mat-horizontal-stepper #stepper style="background: #DDD">
    <mat-step label="Step 1" [editable]="editable">Step 1</mat-step>
    <mat-step label="Step 2" [editable]="editable">Step 2</mat-step>
    <mat-step label="Step 3">
      <button (click)="editable=!editable">Disable steps</button>
    </mat-step>
  </mat-horizontal-stepper>
</div>

В файле TS

editable: boolean = true;

Рабочий пример здесь в Stackblitz