угловой материал stepper: отключить навигацию заголовка

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

Я пробовал <mat-step (click)="$event.stopPropagation()">. не уверен, что еще попробовать, любые предложения будут очень признательны.

7
angular angular-material

3 ответов

добавьте это в таблицу стилей. Я пытался отключить навигацию заголовков. Пробовал много вещей, но этот хак работал. Вы можете попробовать это, пока Angular Material Team не поддержит эту функцию.

.mat-horizontal-stepper-header{
    pointer-events: none !important;
}
21

вам нужно добавить" линейный " атрибут (это отключит навигацию)

<mat-vertical-stepper linear>

1

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

и этот момент form.invalid.

моя ситуация была следующей: пользователь должен заполнить форму внутри шага, нажмите "Сохранить" и только тогда сможете использовать NEXT кнопка и перейдите по шагу дальше (Также назад).

что я сделал, так это представил другого hidden input который будет использовать angular [required] динамический атрибут. Это будет только required если условие не увенчалась успехом. Как только это удастся, это поле не будет required и пользователь может перемещаться.

вместе с атрибутом mat-stepper (или MD-stepper)editable вы должны быть в состоянии достичь того, чего вы хотите.

Дайте мне знать, если вы полностью поняли идею.

0