Angular Material Stepper 组件阻止转到所有未访问的步骤

Question

我正在使用 Angular Material Stepper 组件。

在我的内容中，我有单独的按钮，可帮助用户在当前步骤中的任务完成后移至下一步。

我想阻止用户通过单击步进器组件的步进按钮来访问后续步骤。

但是，我希望用户能够通过步进器组件的步进按钮返回到上一步。

我没有在步进器中使用表单。我看过组件的线性属性，但它不符合我的要求。

简而言之，通过单击步进器组件的步骤按钮阻止用户转到 "unvisited" 步骤。

Answer 1

检查此 link。你需要使用线性步进器。

A stepper marked as linear requires the user to complete previous steps before proceeding. For each step, the stepControl attribute can be set to the top level AbstractControl that is used to check the validity of the step.

示例如下

    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 2

我发现这个问题的解决方案是使用步骤的 completed 属性。参考下面给出的代码行：

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

当 isCompleted 为真时，它将启用下一步。

注意：要使其正常工作，步进器组件必须处于 linear 模式。这可以通过在步进器组件上设置属性 linear 来完成，例如

<mat-horizontal-stepper linear>

Answer 3

我遇到了这个问题并试图解决它我偶然发现了这个 post。我的目标是在用户至少对字段进行一些输入之前阻止下一步 (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] 属性绑定到表单的 valid/invalid 状态。它就像一个魅力。我希望我有所贡献。干杯

Angular Material Stepper 组件阻止转到所有未访问的步骤

Angular Material Stepper component prevent going to all the non visited steps

angular-material2

angular

angular-material-stepper

mat-stepper