Angular Material Stepper コンポーネントを使用しています。
私のコンテンツ内には、現在のステップのタスクが完了するとユーザーが次のステップに移動するのに役立つ個別のボタンがあります。
ユーザーがステッパーコンポーネントのステップボタンをクリックして次のステップにアクセスできないようにしたい。
ただし、ステッパーコンポーネントのステップボタンを使用して、ユーザーが前のステップに戻ることができるようにしたいと思います。
ステッパー内でフォームを使用していません。コンポーネントの線形プロパティを確認しましたが、要件に適合しません。
簡単に言うと、ステッパーコンポーネントのステップボタンをクリックして、ユーザーが「未訪問」のステップに移動できないようにします。
この問題を見つけた解決策は、ステップのcompleted
属性を使用することです。以下のコード行を参照してください。
<mat-step [completed]="isCompleted">
isCompleted
がtrueの場合、次のステップが有効になります。
注:これを機能させるには、ステッパーコンポーネントがlinear
モードである必要があります。これは、ステッパーコンポーネントの属性linear
を次のように設定することで実行できます。
<mat-horizontal-stepper linear>
これをチェックしてください link 。リニアステッパーを使用する必要があります。
線形としてマークされたステッパーは、ユーザーが先に進む前に前のステップを完了する必要があります。ステップごとに、stepControl属性を、ステップの有効性をチェックするために使用される最上位のAbstractControlに設定できます。
以下に示す例
import { Component, Input } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatIconRegistry} from '@angular/material';
@Component({
selector: 'stepper',
templateUrl: './stepper.component.html'
})
export class StepperComponent {
isLinear = true;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
constructor(private _formBuilder: FormBuilder){
}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
}
}
そしてhtmlは
<mat-vertical-stepper [linear]="isLinear">
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button mat-raised-button color="primary" matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button mat-raised-button color="primary" matStepperPrevious>Back</button>
<button mat-button mat-raised-button color="primary" matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel icon>Done</ng-template>
You are now done.
<div>
<button mat-button mat-raised-button color="primary" matStepperPrevious>Back</button>
</div>
</mat-step>
</mat-vertical-stepper>