A bit similar to this question Material Design - How to display a log in error
Though it doesn't address how to do this on a larger screen (i.e. desktop browser) since snackbar at the bottom as an error message is a bit weird on a larger screen, please see image below.
Official material design guidelines doesn't include any web-related guidelines for this case.
I'm currently using
angular 5 and
angular-material which is designed to work both on desktop and mobile.
Cache file /home/queryxchang/questarter.com/apps/frontend/config/../cache/-q-material-design-how-to-display-an-error-on-a-larger-screen-17-117602-html could not be written