Как отключить шаг в Angular Material Stepper?

Question

У меня есть 3 шага в горизонтальном шаговом устройстве Angular Material.Я хочу включить первые 2 по умолчанию, но 3 шага отключены (но не скрыты).

Эти шаги не обязательно имеют значения формы, которые определяют, является ли текущий шаг действительным или нет.Существует ряд внутренних вызовов, которые определяют, является ли текущий шаг действительным или нет.Опция линейного режима выглядит так, как будто она будет работать, но, похоже, полагается, что она является формой с необходимыми значениями, чтобы определить, является ли форма действительной или нет.У меня нет формы, но я все еще хочу такой же тип функциональности.Есть идеи?

https://stackblitz.com/angular/dqllekdmmly?file=app%2Fstepper-overview-example.ts

Answer 1

Для этого вы можете отключить навигацию mat-stepper-header.

И использовать событие щелчка для продвижения вперед.

Чтобы отключить навигацию mat-stepper-header, используйте эту css

.mat-step-header {
                pointer-events: none !important;
     }

Это сработало абсолютно нормально.

Спасибо

Answer 2

Вам не нужно использовать формы, чтобы использовать степпер.Обратите внимание на следующее из документации Angular Material о линейном шаговом двигателе:

В качестве альтернативы, если вы не хотите использовать угловые формы, вы можете передать заполненное свойство вкаждый из шагов, который не позволит пользователю продолжить, пока он не станет истинным.

Без форм вам просто нужно использовать собственную логику и пошаговые функции для реализации состояния и т. д.