Question

我正在使用Angular Material Stepper组件。

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

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

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

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

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

Answer 1

我找到的解决此问题的方法是使用step的completed属性。请参阅下面给出的代码行：

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

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

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

<mat-horizontal-stepper linear>

Answer 2

选中此link。您需要使用线性步进器。

标记为线性的步进器需要用户完成上一步在继续之前的步骤。对于每一步，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]属性绑定到表单的有效/无效状态。它就像一个魅力。我希望我有所贡献。干杯

Angular Material Stepper组件可防止执行所有未访问的步骤

3 个答案: