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

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

  • 2019年5月23日
  • 2021年3月17日
  • Angular
  • 42view

Angularのマテリアルデザインの一つに「Stepper」というものがあります

Material Stepper

こいつですが、デフォルトにあるオプションで最大限設定しても、ヘッダ部分を押すと、勝手にステップが進んでしまいます。

ということで今回は、この動きを封じる方法を解説します。

公式サイト

Stepperの動きを整理

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

 

Stepperの動きを整理

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

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

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

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

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

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

以下のCSSを「styles.css」とかでいいので追記します。

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

Stepperが縦向きの場合

Stepperが横向きの場合

関連記事

以下は、StepperをJavaScriptで進める方法です。

これを組み合わせることで、やれることの幅が広がります。

関連記事

Materialデザインには「Stepper」と呼ばれるものがあります。 ↓こんなやつですね。   で、このStepperをサインアップの画面に使いたいということで導入したのですが、ステップを進めるのをJ[…]

【Angular7】MaterialのmatStepperNextをコードで制御!

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

まとめ

マテリアルデザイン系は痒い所に手が届かないことが多いですね。

ただ、海外サイトなんかは色々情報が豊富なのでありがたいです。

ではまた!

【Angular】Material Stepperのヘッダクリック時の動きを封じる方法!
フォローしてもらえると泣いて喜びます