在mat-vertical-stepper中禁用mat-step

Question

我在mat-step有4个mat-vertical-stepper.我想禁用第2，第3和第4个mat-step，直到第1个mat-step的所有领域都被覆盖。

我试过了：

<mat-step label="Step 1">
    <!-- some codes-->
</mat-step>

在第1步中，我有一个下一个按钮，此按钮被禁用，直到覆盖所有字段。

<button mat-raised-button color="primary" style="float:right"
     [disabled]="!DetailsForm.valid" (click)="step2.disabled = false">Next</button> 

接下来是第2步：

<mat-step label="Step 2" [disabled]="step2.disabled">

它显示错误“禁用不是mat-step的一部分”。

像这样，休息两个mat-step在那里。我想禁用第2，第3，第4个mat-step。

在下面的情况下，我如何使用linear？

    <mat-vertical-stepper #stepper>
       <mat-step label="General Details">
           <h4> First Name </h4>
       </mat-step>
       <mat-step label="Education">
           <h4>Highest Education </h4>
       </mat-step>
    </mat-vertical-stepper>

和，

   <div class="col-md-9 col-lg-9">
     <form [formGroup]="generalDetailsForm">
       <div class="row">
         <div class="col-md-5 col-lg-5">
           <mat-form-field class="example-full-width">
             <input matInput placeholder="First Name" [(ngModel)]="firstName">
           </mat-form-field>
         </div>
      </div>
    </form>
   </div>

Answer 1

在mat-step中使用[stepControl]="formName"并在.ts中对表格进行验证。

仅使用linear无济于事。我做错了。我没有使用[stepControl]

Answer 2

mat-vertical-stepper没有禁用属性，因为异常消息说。

尝试设置<mat-vertical-stepper [linear]="true">

之后，您需要像处理一样处理按钮的可见性。一个按钮具有禁用的属性。

Answer 3

对于任何人看到这个。

我用linear completed属性解决了这个问题。

 <mat-horizontal-stepper #stepper [linear]="true">
   <mat-step state="state_1" label="label" [completed]="condition">
   </mat-step>
   ....
 </mat-horizontal-stepper>

使用completed属性将步骤标记为“已完成”

来自文档：

或者，如果您不想使用Angular表单，则可以将completed属性传递给每个步骤，这些步骤将不允许用户继续，直到它变为true。请注意，如果同时设置了completed和stepControl，则stepControl将优先。

https://material.angular.io/components/stepper/overview

编辑：添加示例

Answer 4

添加属性class =“mat-elevation-z1”对我有用