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

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

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

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

僕のPC環境

公式サイト

以下が公式サイトになります。

Stepperの動きを整理

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

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

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

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

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

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

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

以下のCSSを「styles.css」とかでいいので追記します。これでヘッダをクリックしてもステップが進まなくなります。

Stepperが縦向きの場合

Stepperが横向きの場合

関連記事

以下は、StepperをJavaScriptで進める方法です。これを組み合わせることで、やれることの幅が広がります。

 Traveler

【Angular7】MaterialのmatStepperNextをコードで制御！ 1 user

https://traveler0401.com/angular-material-stepper/

Materialデザインには「Stepper」と呼ばれるものがあります。↓こんなやつですね。 で、このStepperをサインアップの画面に使いたいということで導入したのですが、ステップを進めるのをJavaScript側で制御したいわけです。ということで今回は、Materialデザイン...

おすすめ書籍

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

Ａｎｇｕｌａｒアプリケーションプログラミング 開発の勘所と手順をしっかりマスター /技術評論社/山田祥寛

posted with カエレバ

楽天市場

Amazon

まとめ

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

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

ではまた！