angular - Angular Material Stepper 组件阻止进入所有未访问的步骤

Question

我正在使用Angular Material Stepper组件。

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

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

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

我没有在步进器内使用表单。我已经看到了组件的 Linear 属性，但它不符合我的要求。

简而言之，通过单击步进器组件的步骤按钮，防止用户进入“未访问”步骤。

Answer 1

我发现这个问题的解决方案是使用completedstep 的属性。请参阅下面给出的代码行：

<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]到表单的有效/无效状态。它就像一个魅力。我希望我做出了贡献。干杯