Компонент Angular Material Stepper предотвращает переход на все не посещенные этапы

Question

Я использую компонент Angular Material Stepper.

В моем контенте у меня есть отдельные кнопки, которые помогают пользователю перейти к следующему шагу после завершения задачи на текущем шаге.

Я хочу запретить пользователю переходить к следующим шагам, нажимая кнопки шагов компонента Stepper.

Тем не менее, я хочу, чтобы пользователь мог вернуться к предыдущему шагу с помощью кнопок шага шагового компонента.

Я не использую форму внутри степпера. Я видел свойство Linear компонента, но оно не соответствует моим требованиям.

Короче говоря, не позволяйте пользователю переходить к "невидимым" шагам, нажимая кнопки шага шагового компонента.

Answer 1

Решение, которое я нашел для этой проблемы, заключается в использовании completed атрибут шага. Обратитесь к строке кода, приведенной ниже:

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

когда isCompleted Это правда, что это позволит следующий шаг.

Примечание. Чтобы это работало, шаговый компонент должен находиться в linear Режим. Это можно сделать, установив атрибут linear на шаговом компоненте, вроде

<mat-horizontal-stepper linear>

Answer 2

Проверьте эту ссылку. Вам нужно использовать линейный степпер.

Степпер, помеченный как линейный, требует от пользователя выполнения предыдущих шагов, прежде чем продолжить. Для каждого шага атрибуту stepControl можно присвоить верхний уровень AbstractControl, который используется для проверки действительности шага.

Пример показан ниже

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]
        });
      }
    }

и HTML это

<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>

Answer 3

У меня была эта проблема, и я, пытаясь ее решить, наткнулся на этот пост. Моя цель состояла в том, чтобы заблокировать следующий шаг (formGroup) до того, как пользователи хотя бы что-нибудь введут в поля. Итак, я пришел к простому решению:

HTML (обратите внимание, у меня есть смесь между ngBoostrap и Angular Material, надеюсь, никакого вреда:)

div class="container-fluid ">
    <div class="row" style="height: 100vh">
        <div class="col-md-6">
           
            <mat-vertical-stepper [linear]="namesGroup.invalid" #stepper>
                <mat-step [stepControl]="namesGroup" >
                    <form [formGroup]="namesGroup">
                        <ng-template matStepLabel>Fill out your name and username</ng-template>
                        <mat-form-field>
                            <mat-label>Name</mat-label>
                            <input matInput placeholder="First name" formControlName="name" required>
                        </mat-form-field>
                        <!--Errors-->
                        <div *ngIf="name.touched && name.invalid">
                            <mat-error *ngIf="name.errors.required"><small>Name is required</small></mat-error>
                        </div>
                        <!--Errors-->
                        <mat-form-field>
                            <mat-label>Username</mat-label>
                            <input matInput placeholder="Username" formControlName="username" required>
                        </mat-form-field>
                        <!--Errors-->
                        <div *ngIf="username.touched && username.invalid">
                            <mat-error *ngIf="username.errors.required"><small> Username is required</small></mat-error>
                        </div>
                        <!--Errors-->
                        <div>
                            <button [disabled]="namesGroup.invalid" mat-raised-button color="primary" matStepperNext>Next</button>
                        </div>
                    </form>

У меня есть еще две группы форм, и логика повторяется. Так что я просто связываю[linear]Атрибут допустимого / недопустимого состояния формы. И это работает как шарм. Надеюсь, я внес свой вклад. Ура

Answer 4

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

       <button  [disabled]="this.var == 'yes' 
   && this.var2 == 'Select File'" 
   type="button" 
   matStepperNext>

           Next Step

  </button>