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

Ответ 1

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

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

Ответ 2

Используйте степпер linear с шагами completed=false. Когда пользователь нажмет вашу кнопку, программно завершите шаг и перейдите к следующему.

Таким образом, вам не нужно связываться с событиями указателя CSS. В нашем приложении это привело к проблемам с доступностью NVDA.

<mat-horizontal-stepper linear #stepper>
  <mat-step completed="false">
    <ng-template matStepLabel>Step 1</ng-template>
    <app-some-child (nextClicked)="nextClicked($event)" ></app-some-child>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Step 2</ng-template>
    <app-some-other-child></app-some-other-child>
  </mat-step>
</mat-horizontal-stepper>

export class AppComponent implements OnInit {

  @ViewChild('stepper') stepper: MatStepper;

  nextClicked(event) {
    // complete the current step
    this.stepper.selected.completed = true;
    // move to next step
    this.stepper.next();
  }
}

Ответ 3

Не работает без :: ng-deep

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

Ответ 4

Просто для улучшения принятого ответа, так как он не будет работать, если у вас есть вертикальный шаговый двигатель.

Чтобы пользователь не мог щелкнуть заголовок и перейти, добавьте следующий код в файл style.css в корневом каталоге: -

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

Это обеспечит его работу для mat-horizontal-stepper-header и mat-vertical-stepper-header

Ответ 5

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

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

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

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

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

Сообщите мне, если вы полностью поняли эту идею.

Ответ 6

Здесь ::ng-deep .mat-horizontal-stepper-header-container { display: none ; }

Используйте это в своей таблице стилей, чтобы удалить шаговый заголовок... Как Шаг-1, Шаг-2

Ответ 7

Сначала вам нужно добавить ViewEncapsulation.None в конфигурацию вашего компонента

@Component({
 selector: 'app-example',
 encapsulation: 'ViewEncapsulation.None'
 })

Затем добавьте это в свой компонент CSS.

.mat-horizontal-stepper-header-container  {
  display: none !important;
 }

Ответ 8

Не используйте :: ng-deep, поскольку он устарел.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Вместо этого, если вы используете Angular Material, используйте руководство по темам из документации.

https://material.angular.io/guide/theming

Пример реализации стиля:

мой обычай-elements.scss

@import '[email protected]/material/theming';

@mixin custom-stepper-theme() {
  .mat-horizontal-stepper-header {
    pointer-events: none;
  }
}

глобального материала-theme.scss

@import '[email protected]/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import './material/my-custom-elements.scss';

@include custom-stepper-theme();

angular.json

...
"styles": ["src/styles.scss", "src/app/global-material-theme.scss"]
...

Ответ 9

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

<mat-vertical-stepper linear>

Ответ 10

В тег добавьте [linear] = "true"

<mat-horizontal-stepper labelPostion="botton" [linear]="true">
...
</mat-horizontal-stepper>