web-dev-qa-db-fra.com

matériau pas à pas angulaire: désactiver la navigation dans l'en-tête

Je veux naviguer dans le stepper seulement lancer les boutons suivant et arrière. Cela ne fonctionne pas, car les utilisateurs peuvent également cliquer sur chaque étiquette d'étape pour accéder à n'importe quelle étape. Je ne peux pas utiliser linéaire, car chaque étape doit avoir une formArray ou FormGroup.

J'ai essayé <mat-step (click)="$event.stopPropagation()">. Ne sachant pas quoi essayer d'autre, toute suggestion serait très appréciée.

angularangular-material
13
Shaniqwa

Ajoutez ceci à votre feuille de style. J'essayais de désactiver la navigation en-tête. Essayé beaucoup de choses, mais ce hack a fonctionné. Vous pouvez essayer ceci jusqu'à ce que Angular Material Team prenne en charge cette fonctionnalité.

.mat-horizontal-stepper-header{
    pointer-events: none !important;
}
33
Shahzaib Shahid

J'ai trouvé une solution quelque peu hacky pour cela. Le problème est que vous ne pouvez pas désactiver complètement la navigation dans l'en-tête, mais vous pouvez empêcher son activation jusqu'à un certain moment. 

Et ce moment est form.invalid.

Ma situation était la suivante: l'utilisateur doit remplir le formulaire à l'intérieur de l'étape, appuyer sur 'enregistrer' pour pouvoir utiliser le bouton NEXT et accéder au stepper plus avant (également à l'arrière). 

Ce que j'ai fait a été d'introduire une autre hiddeninput qui utiliserait l'attribut dynamique [required] d'angular. Ce ne sera que required si la précédente condition save n'a pas abouti. Une fois que ce sera réussi, ce champ ne sera plus required et l'utilisateur pourra naviguer plus loin.

Avec l'attribut editable de mat-stepper (ou md-stepper), vous devriez pouvoir réaliser ce que vous voulez.

Faites-moi savoir si vous avez bien compris l'idée. 

1
Deniss M.

Vous devez ajouter un attribut "linéaire" (Cela désactivera la navigation)

<mat-vertical-stepper linear>

1
Алексей Като

Juste pour améliorer la réponse acceptée, car cela ne fonctionnera pas si vous avez un stepper vertical.

Pour empêcher l'utilisateur de cliquer sur l'en-tête et naviguer, ajoutez le code suivant à votre fichier style.css à la racine: -

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

Cela garantira que cela fonctionne pour mat-horizontal-stepper-header et mat-vertical-stepper-header

1
Hensler Software

Vous devez d’abord ajouterViewEncapsulation.Nonedans la configuration de votre composant

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

Ajoutez ensuite ceci dans votre composant CSS.

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

Ne fonctionne pas sans :: ng-deep  

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

Utilisez un stepper linear avec des étapes completed=false. Lorsque l'utilisateur appuie sur votre bouton, complétez l'étape par programmation et passez au suivant.

De cette façon, vous n'avez pas besoin de jouer avec les événements de pointeur CSS. Dans notre application, cela entraînait des problèmes d'accessibilité avec 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();
  }
}
0
James Young

Dans la balise, ajoutez [linear] = "true"

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

Ici ::ng-deep .mat-horizontal-stepper-header-container { display: none ; } 

Utilisez-le sur votre feuille de style pour supprimer l'en-tête de stepper ... Comme pour les étapes 1 et 2

0
Dharshan PLUV