web-dev-qa-db-ja.com

mat-vertical-stepperでmat-stepを無効にする

mat-stepに4つのmat-vertical-stepper.があります。1番目のmat-stepのすべてのフィールドがカバーされるまで、2番目、3番目、4番目の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の一部ではありません」というエラーが表示されます。

このように、残りの2つの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>
htmlangular-materialangular5
5
Nandini S

mat-stepでは[stepControl]="formName"を使用し、.tsではフォームの検証を行います。

linearだけを使用しても役に立ちません。私は間違っていました。 [stepControl]を使用しませんでした

2
Nandini S
<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>
1
Bhavik patel

mat-vertical-stepperにはプロパティがありません無効例外メッセージに示されています。

設定してみてください<mat-vertical-stepper [linear]="true">

その後、ボタンの表示を処理する必要があります。ボタンには無効プロパティがあります。

1
Daniel

ステップ2を無効にする場合は、ステップ1で[completed]を使用すると同時に、[stepControl]をnullに設定する必要があります。これは、[stepControl]が[completed]よりも優先されるためです。

 <mat-horizontal-stepper #stepper [linear]="true">
   <!-- step1 -->
   <mat-step
     [stepControl]="shouldNextStepBeDisabled ? null : formGroup"
     [completed]="shouldNextStepBeDisabled ? false : formGroup.valid">
   </mat-step>
   ....
 </mat-horizontal-stepper>
0
Matvii Stelmakh

ステップ-1：Component.ts

stepDisabled: boolean = true;

ステップ2：Component.css

::ng-deep .mat-step-header[aria-labelledby="disabled_Resi"] {
  pointer-events: none !important;
  cursor: not-allowed;
}

ステップ-3：Component.html

  <mat-step [aria-labelledby]="stepDisabled ? 'disabled_Resi' : null" [stepControl]="ResidentalAddressFG"></mat-step>

ステップ：4

<button mat-stroked-button (click)="stepDisabled = !stepDisabled">{{stepDisabled ? 'Enable' : 'Disable'}} Step</button>
0
SHUBHASIS

これを見ている人のために。

これをlinearcompleted属性で解決しました。

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

完了属性を使用して、ステップを「完了」としてマークします

ドキュメントから：

または、Angularフォームを使用したくない場合は、完了したプロパティを各ステップに渡して、ユーザーがtrueになるまで続行できないようにすることができます。注completeとstepControlの両方が設定されている場合、stepControlが優先されます。

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

編集：例を追加

0
delpo