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

Question

I have 4 mat-step in mat-vertical-stepper. I want to disable 2nd,3rd & 4th mat-step until the 1st mat-step ’s all fields covered.

我试过：

 <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 在那里。我想禁用 2nd,3rd,4th 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>

原文由 Nandini S 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Bhavik patel 发布，翻译遵循 CC BY-SA 4.0 许可协议