Отключить предыдущие завершенные шаги на мат-степпере в углу 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>

Inфайл TS

editable: boolean = true;

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