ngMessage not showing until form is touched

[bgoerdt]

In 1.0.0-rc4 the ngMessage for an input field is not showing up until the form is touched.

Here is a codepen demonstrating the issue: http://codepen.io/bgoerdt/pen/QjoPEP

[bopm]

👍

[andrew-cunliffe]

See - https://material.angularjs.org/latest/api/directive/mdInputContainer

You can use the md-is-error on the input-container to force this, the default is to show when touched, and this seems like the best experience to me... however if you have a special case then use this attribute.

e.g. something like... (or just flag as true perhaps if you always want the errors to show)

<md-input-container md-is-error="hasMessage(form.field)">
    ......
    <ng-messages="form.field"> ...... </ng-messages>
</md-input-container>

[topherfangio]

This is likely a change caused by only showing after the input has the md-input-is-invalid class. We are making modifications to no longer do this by default, but to allow you to use ng-show/hide on the ng-messages element to better control this. Should be in master soon.

I will update this ticket when I push the PR.

[bopm]

Any news on that? That blocks us from using 1.0 and reverting breaking changes to conform 0.11.0 will cost a lot.

[SnakeME]

+1

[bopm]

Only workaround that working for me right now is next css: .errors {opacity: 1 !important;}. I am pretty angry that something so bad is needed in a project, so I'll remove it as soon as real solution will be here.

[SnakeME]

md-input-container [ng-messages] {opacity: 1 !important;} worked for me.

[bopm]

10 days with zero activity. Is it even going to be in 1.0? From my perspective that's huge problem as it breaks angular conventions and don't allow me to build standard user experience. Yet nothing is happening.

[topherfangio]

@bopm In general, we attempt to follow Google's Material Design Spec as closely as possible. Based on the comments/images at http://www.google.com/design/spec/patterns/errors.html#errors-user-input-errors, errors are not supposed to be visible until the form is touched, so this extra CSS was added.

Show error text only after user interaction with a field.

However, we realize the need for a bit more customization (even the images in the spec show info-like messages before being touched), so we are working to make this available. We are planning to have this available in 1.0.

[bopm]

@topherfangio thanks for your explanation. I can explain why it's so crucial for project I working on, just to be polite. We building forms on top of Angular Material and they being sent to server. Server errors then being displayed to user using ng-messages. And they in our case need to stay displayed only till user interacts with field. So in our case on $touched we actually remove server error. May be it's not best way to deal with that but it is how it is.

Anyway, thanks for update, if that going to happen in 1.0 I am going to wait with current fix as long as 1.0 being delivered.

[SnakeME]

I think it is some kind of flaw in the Material Design Spec because if a user clicks on the form submit button the error(s) should be shown even when the user didn't touch the form before. Sure there are workarounds for this but it adds only more unnecessary overhead.

[michaelkrog]

Also related: Autocomplete does not seem to show the messages even after being touched. ;-(
http://codepen.io/anon/pen/yeLPVy

[dnd]

I'm experiencing the same issue as @michaelkrog using 1.0.0-rc6, and latest master of this moment 8274eeeb9b. Errors do not show up at all for the autocomplete box even after being touched.

[bgoerdt]

I have updated the original CodePen (http://codepen.io/bgoerdt/pen/QjoPEP) for the latest version (1.0.0-rc7) and the issue is still happening.

[kamarouski]

-1 :)

It think it makes sense not to display validation error until user touches the input. Otherwise users might overwhelmed and confused why do they see errors thought they did nothing wrong.

Previously we had to use ng-show to mimic this. Looks like this actually fixes the problem rather than creates one.

[bopm]

@kamarouski I am ready to give you a corner case. Ng-messages-exp. As soon as you have in your rotation validation messages sent from a server, not displaying them till a control touching will create a big UX problem.

[andrew-cunliffe]

But, with that corner case why not use the md-is-error attribute? this is what we are doing and works great for situations where you want forms to show errors without any user interaction... just like my first comment here.

[kamarouski]

@bopm I agree. It should be an option to display errors when you load them from backend.

I think most common for SPAs and web forms is a behaviour when messages are hidden by default. When you do form submit and errors are returned from your API, for example, then form is in $submitted state and errors are displayed. That's why this behaviour looks a better candidate to a default one for me.

[richieforeman]

+1

[topherfangio]

@richieforeman Any chance you can test the PR I just pushed (#6298) and see if it raises any problems for you?

[richieforeman]

I'm not discounting that I did something wrong, but I have updated my pen here:
http://codepen.io/richieforeman/pen/rxOgVz

I can still dupe.

[topherfangio]

@richieforeman You'll need to add md-auto-hide="false" or ng-show="true" to your messages to turn off the auto-hiding capabilities.

[richieforeman]

That did it. Thanks for your response here, @topherfangio . 💯

[aaroncalderon]

But, doing so will brake animations (#6767 (comment))