マテリアルデザイン-大きな画面でエラーを表示する方法
この質問に少し似ています Material Design-How to display a log in error
エラーメッセージとして下部にあるスナックバーは大きな画面では少し奇妙なので、大きな画面（つまり、デスクトップブラウザー）でこれを行う方法については説明していませんが、下の画像を参照してください。
公式の材料設計ガイドラインには、この場合のWeb関連のガイドラインは含まれていません。
現在angular 5とangular-materialを使用しており、デスクトップとモバイルの両方で機能するように設計されています。
材料設計ガイドラインには、 エラー というセクションがあります。
ユースケースについては、次のことをお勧めします。
2つ以上のフィールドに互換性のない入力がある場合：
- テキストフィールドで、修正が必要であることを示します。以下にエラーメッセージを追加します。
- フォームまたは画面の上部にメッセージを表示し、必要な修正と追加の説明を要約します
これはモバイルでは次のようになります。
あなたのケースでは、大量のメッセージが「サインイン」の見出しのすぐ下に表示されると思います。
スナックバーに関しては、これは続けてこう言います：
スナックバーには、周辺機器のエラーに関するアプリのフィードバックが含まれています。スナックバーは一時的なものです。重大なエラー、永続的なエラー、または一括エラーには使用しないでください。
大きな画面でスナックバーを完全に廃止します。スクリーンショットに示すように、エラーのあるコントロールのすぐ下の大きな画面でエラーメッセージをインラインで表示し、コントロールを赤で強調表示します。
あなたがスナックバーと結婚している場合、以下が私の推奨です1.大きな画面でスナックバーを一番上に移動します。スナックバーが画面の上部からドロップするようにアニメーションを追加します。 2.スナックバーを拡張して、現在あるよりも広いエリアをカバーします。あなたが今持っているよりも高くないなら、私は約3回行きます
マテリアルデザインの仕様は応答性が高いと言われていますが、一部の仕様は、より大きな画面のレンダリングではフラットになりません。しかし、誰も完璧ではありません！
それが役立つかどうか私に知らせてください！