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.
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;
}
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 hidden
input
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.
Vous devez ajouter un attribut "linéaire" (Cela désactivera la navigation)
<mat-vertical-stepper linear>
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
Vous devez d’abord ajouterViewEncapsulation.None
dans 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;
}
Ne fonctionne pas sans :: ng-deep
::ng-deep .mat-horizontal-stepper-header{
pointer-events: none !important;
}
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();
}
}
Dans la balise, ajoutez [linear] = "true"
<mat-horizontal-stepper labelPostion="botton" [linear]="true">
...
</mat-horizontal-stepper>
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