在垂直垫板中禁用垫板垫

Question

我有4个mat-step在mat-vertical-stepper.我想禁用第2，第3和第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">

它显示一个错误“禁用不是一部分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>

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>

Answer 2

@delpo 和 @Matvii 的解决方案应该适合您的需求。

<mat-vertical-stepper #stepper [linear]="true">
 <mat-step
   state="first"
   [completed]="formGroup.valid"
   [editable]="true">
 </mat-step>
 <mat-step state="final">
 </mat-step>
</mat-vertical-stepper>

这可以通过使用[linear]="true"并通过传递 FormGroup 的有效性来使用[completed]="formGroup.valid"禁用下一步来实现，因此每当 FormGroup 有效时，都应该启用/应该启用下一步能够继续进行。

Answer 3

mat-vertical-stepper正如异常消息所示，没有禁用任何属性。

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

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