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

Question

我正在使用Angular Material Stepper组件。

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

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

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

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

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

Answer 1

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

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

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

注意：要使其工作，步进组件必须处于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]属性绑定到表单的有效/无效状态。 它就像一个魅力。 我希望我有所贡献。 干杯