web-dev-qa-db-fra.com

Angular Material Stepper empêche d'aller à toutes les étapes non visitées

J'utilise le composant Angular Material Stepper .

Dans mon contenu, j'ai des boutons séparés qui aident l'utilisateur à passer à l'étape suivante une fois la tâche de l'étape actuelle terminée.

Je souhaite empêcher l'utilisateur de visiter les étapes suivantes en cliquant sur les boutons d'étape du composant pas à pas.

Cependant, je veux que l'utilisateur puisse revenir à une étape précédente via les boutons de pas du composant pas à pas.

Je n'utilise pas de formulaire à l'intérieur du stepper. J'ai vu la propriété linéaire du composant, mais elle ne correspond pas à mes besoins.

En bref, empêchez l'utilisateur de passer aux étapes "non visitées" en cliquant sur les boutons de pas du composant pas à pas.

angularangular-material2angular-material-steppermat-stepper
4
Temp O'rary

La solution que j'ai trouvée à ce problème est d'utiliser l'attribut completed de l'étape. Reportez-vous à la ligne de code ci-dessous:

<mat-step [completed]="isCompleted">

Lorsque isCompleted est vrai, cela active l'étape suivante.

Remarque: Pour que cela fonctionne, le composant pas à pas doit être en mode linear. Cela peut être fait en définissant l'attribut linear sur le composant stepper, comme

<mat-horizontal-stepper linear>

14
Temp O'rary

Vérifiez cela lien . Vous devez utiliser un stepper linéaire.

Un stepper marqué comme linéaire nécessite que l'utilisateur effectue les étapes précédentes avant de continuer. Pour chaque étape, l'attribut stepControl peut être défini sur AbstractControl de niveau supérieur qui est utilisé pour vérifier la validité de l'étape.

Exemple illustré ci-dessous

import { Component, Input } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatIconRegistry} from '@angular/material';

@Component({
  selector: 'stepper',
  templateUrl: './stepper.component.html'
})
    export class StepperComponent  {
       isLinear = true;
      firstFormGroup: FormGroup;
      secondFormGroup: FormGroup;

      constructor(private _formBuilder: FormBuilder){

      }
       ngOnInit() {
        this.firstFormGroup = this._formBuilder.group({
          firstCtrl: ['', Validators.required]
        });
        this.secondFormGroup = this._formBuilder.group({
          secondCtrl: ['', Validators.required]
        });
      }
    }

et html est

<mat-vertical-stepper [linear]="isLinear">
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button mat-raised-button color="primary" matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button mat-raised-button color="primary" matStepperPrevious>Back</button>
        <button mat-button mat-raised-button color="primary" matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel icon>Done</ng-template>
    You are now done.
    <div>
      <button mat-button mat-raised-button color="primary" matStepperPrevious>Back</button>
    </div>
  </mat-step>
</mat-vertical-stepper>
2
Nikhil Chandu