【Angular】Material Stepperのヘッダクリック時の動きを封じる方法！

悩んでいる男の子

Material Stepperのヘッダクリック時の動きを止めたいんだけど、やり方が分からないんだよね。。

こんな悩みを解決します。

• 本記事の内容

• Material Stepperのヘッダクリック時の動きを封じる方法

• 本記事の執筆者

プロフィール

• 長身ガリガリ自称イケメン(1993/4/1生)
• 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
• 副業(物販)5か月目で月利30万円⇒脱サラ
• 物販、システム開発、アフィリエイト、投資を細々とやっています。
• 物販は彼女と楽しみながらやってます！

プロフィールページへ

今回は、Material Stepperのヘッダクリック時の動きを封じる方法を解説します。

いずみん

すぐ終わるので、最後まで読んでみてください！

Stepperとは？

上図がMaterialのStepperです。

公式

Angular Material UI component infrastructure and Material Design components for Angular web applications.

Stepperは、ヘッダ部分を押すと勝手にステップが進んでしまうという問題があります。

Stepperの動きを整理

Stepperは「isEditable = false;」を設定することで、そのセクションで表示されているフィールドが正しく入力された場合のみ、ステップを進めることができます。

上図だと、「Last name, First name」に値が設定されていないのでステップは進みません。

ここで正しい値を入力するとステップを進めることができるのですが、問題なのは「Next」ボタンではなく、「②Fill out your address」ヘッダを押してもステップが進んでしまうことです。

Stepperのヘッダを押して進むのは何が問題？

例えば、「Next」ボタンでサーバにアクセスし、成功した場合のみステップを進めたい場合、「Next」ボタンを押さなくても、ヘッダを押したらステップを進めてしまいます。

要は、表示されているセクションでクライアントエラーが出ていなければ前に進めちゃうわけです。

Stepperのヘッダを押してもステップを進めないようにする

以下のCSSを「styles.css」等に追記します。

これでヘッダをクリックしてもステップが進まなくなります。

Stepperが縦向きの場合

.mat-vertical-stepper-header {
  pointer-events: none !important;
}

Stepperが横向きの場合

.mat-vertical-stepper-header {
  pointer-events: none !important;
}

まとめ

今回は、Material Stepperのヘッダクリック時の動きを封じる方法を解説しました。

Angularの情報は少ないので大変ですね。。

ではまた！

• おススメ本はこちら！

いずみん

僕は↓の本でAngularの勉強をしました！
非常に分かりやすいので是非！

Angularアプリケーションプログラミング

¥4,070 （2021/12/11 17:38時点 | Amazon調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ