md-input-container: ng-touched added on page load

[epelc]

I think this commit has broken the styles for md-input-container. It's adding the invalid styles when the page is loaded instead of after the user first touches the input. Also I believe ng-touched is not supposed to be added on page load.

[epelc]

I should mention this is for inputs with required and possible the min/max length attributes.

[ThomasBurleson]

@epelc - here is the issue. If the input field is invalid during page load/initialization, the previous solution does not indicate such. As soon as you touch it and defocus it shows the error style. This is a horrible UX: if the value is invalid show the style immediately. Hence the change(s).

[epelc]

@ThomasBurleson What about for required fields? It makes your form look terrible if half your inputs are red when they load especially for a sign in page. Also the user has a general idea that most things are required why do we have to scream it to them when they show up? Wouldn't it be better to guide them as they fill out the form instead?

As a side note this is also how most forms already work so it breaks what the user has already learned. Ie google's sign up page only warns you about an invalid input after you have touched it or input something invalid.
https://accounts.google.com/SignUp

[grabbou]

@ThomasBurleson I believe it should show the error as soon as you touch it. For now - even simple login form is completely red as "required" & "email" are obviously wrong on first page load.

Also - on initial page load, my ng-messages are showing ng-message="required" by default.

and without ng-if="form.input.$dirty" (should not be needed)

With above approach, doing more complex form of any kind to handle API endpoints is just not going to work.

[AllenSH12]

FWIW here's what the Material spec says on the topic:
http://www.google.com/design/spec/patterns/errors.html#errors-user-input-errors

[grabbou]

+1 @AllenSH12

[ThomasBurleson]

@AllenSH12 - Thank you for the link. I did not realize that Material Design is explicit. Very nice... now I will queue this issues as a definite bug. Thx again.

[AllenSH12]

@ThomasBurleson no problem!

[AllenSH12]

In the meantime I tweaked the Error demo to demo the behavior more explicitly, PR here: #1491

[ThomasBurleson]

@grabbou - can you provide a CodePen or Plunkr that I can use to verify changes ?