web-dev-qa-db-ja.com

Angular Material Stepperコンポーネントは、すべての非訪問ステップへの移動を防ぎます

Angular Material Stepper コンポーネントを使用しています。

私のコンテンツ内には、現在のステップのタスクが完了するとユーザーが次のステップに移動するのに役立つ個別のボタンがあります。

ユーザーがステッパーコンポーネントのステップボタンをクリックして次のステップにアクセスできないようにしたい。

ただし、ステッパーコンポーネントのステップボタンを使用して、ユーザーが前のステップに戻ることができるようにしたいと思います。

ステッパー内でフォームを使用していません。コンポーネントの線形プロパティを確認しましたが、要件に適合しません。

簡単に言うと、ステッパーコンポーネントのステップボタンをクリックして、ユーザーが「未訪問」のステップに移動できないようにします。

angularangular-material2angular-material-steppermat-stepper
4
Temp O'rary

この問題を見つけた解決策は、ステップのcompleted属性を使用することです。以下のコード行を参照してください。

<mat-step [completed]="isCompleted">

isCompletedがtrueの場合、次のステップが有効になります。

注：これを機能させるには、ステッパーコンポーネントがlinearモードである必要があります。これは、ステッパーコンポーネントの属性linearを次のように設定することで実行できます。

<mat-horizontal-stepper linear>

14
Temp O'rary

これをチェックしてください 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>
2
Nikhil Chandu