Angular 角材料步进器组件防止进入所有未访问的步骤

我正在使用组件

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

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

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

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

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

检查这个。你需要使用线性步进器

标记为线性的步进器要求用户完成上一步 继续之前的步骤。对于每个步骤，可以使用stepControl属性 设置为用于检查 步骤的有效性

示例如下所示

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>

填上你的名字
下一个
填写你的地址
返回
下一个
多恩
你现在完成了。
返回

我发现这个问题的解决方案是使用步骤的

completed

属性。请参阅下面给出的代码行：

当

isCompleted

为true时，将启用下一步

注意：要使其工作，步进器部件必须处于

线性模式。这可以通过在步进器组件上设置属性
linear
来实现，如

我遇到了这个问题，为了解决这个问题，我偶然发现了这篇文章。我的目标是在用户至少对字段有一些输入之前阻止下一步（formGroup）。所以我想出了一个简单的解决方案：

HTML（注意我混合了ngBoostrap和棱角材质，希望不会造成任何伤害：）

div class=“容器流体”>
填写您的姓名和用户名
名称
名称是必需的
用户名
用户名是必需的
下一个

我还有两个表单组，逻辑会自动重复。因此，我只是将
[linear]
属性绑定到表单的有效/无效状态。它就像一个符咒。我希望我有所贡献。干杯
请查看棱角材料的线性步进器否，不是我的要求。我想“通过单击步进器组件的步骤按钮，防止用户访问接下来的步骤”。用户不应该能够转到下一步，但应该能够转到上一步。用户在某个时候是否能够通过单击“下一步”按钮转到下一步？不，不是我的要求。我想“通过单击步进器组件的步骤按钮，防止用户访问接下来的步骤”。用户不应该能够转到下一步，但应该能够转到上一步。@TempO'rary这是您的要求，您只需要理解它。就是这样做的。除非表单有效，否则使用“下一步”按钮将不起作用。回去会有用的。我明白了，但我不使用表单。那么我的问题是，在不使用表单的情况下怎么做？是的，它在没有表单的情况下会工作。您可以在这个github中找到更多信息，这是一个非常好的解决方案！简单地将其线性化并不是我想要的，因为您必须弄乱Stepper的内部验证机制。使用您的解决方案，我现在可以手动控制它。
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>