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

Question

我在 mat-vertical-stepper 中有 4 个 mat-step。 我想禁用第 2、3rd 和第 4 个 mat-step 直到第一个 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">

它显示错误“disabled is not a part of 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-horizontal-stepper #stepper [linear]="true">
<mat-step [completed]="false">
   <!-- set completed = false to disable next step -->
</mat-step>
<mat-step>
   this step would be disable         
</mat-step>
</mat-horizontal-stepper>