『自由力』を身に付けるサイト「リバトレ」も見てね!!

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

悩んでいる男の子

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

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

  • 本記事の内容
  • Material Stepperのヘッダクリック時の動きを封じる方法
  • 本記事の執筆者
プロフィール
どこの写真だよ
  • 長身ガリガリ自称イケメン(1993/4/1生)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 副業(物販)5か月目で月利30万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、投資を細々とやっています。
  • 物販は彼女と楽しみながらやってます!

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

いずみん

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

目次

Stepperとは?

Material Stepper

上図がMaterialのStepperです。

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

Stepperの動きを整理

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

Stepperの動きを整理

上図だと、「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】Material Stepperのヘッダクリック時の動きを封じる方法!

この記事が気に入ったら
フォローしてね!

シェアするんやで!

~ リバトレ ~

お金や副業に関する情報を発信しているよ!

この記事を書いた人

いずみんのアバター いずみん 自由力発信おじ

【自由力発信】うさんくさ笑 | 副業物販で5ヶ月目に月利30万円達成⇨脱サラ予定 | 物販(アパレルせどり)・アフィリエイト・投資で自由になるための情報を発信中?笑 | 元エンジニア | 保有資格約20個

関連記事

コメント

コメントする

目次
閉じる