md-input-container not showing error ng-messages

[vlio20]

Hi,
There are cases when the error message (ng-message) not showing, try to play with the codepen below.
the input field is required and minlength set to 2:
http://codepen.io/vlio20/pen/KVybvx?editors=110

Steps to reproduce:

1. focus on input.
2. enter 1 char & focus out (blur) -> minlength error message is displayed.
3. delete the char from step 2 -> no message is displayed, when the required message should have been displayed.

Note-1: The form is invalid with correct message

Note-2: in happens for other validations as well (other then required and minlength).
If I am overriding the styles like bellow, it seems to be working, but the animations are not good when the error message is changed:

md-input-container.md-input-invalid .md-auto-hide .md-input-message-animation:not(.ng-animate) {
  opacity: 1;
  margin-top: 0;
}

md-input-container.md-input-invalid [ng-messages] {
  max-height: 19px;
}

I am using 1.0.2 version, but it seems to be broken since 1.0.0

[persimmons]

update: codepen

+1 - I am doing custom messaging for server-side errors with ng-messages using an md-input-container, and I'm running into the same issue.

<md-input-container>
  <div ng-messages="vm.loginServerErrors"
       role="alert">
    <div ng-message="loginFailed">
      Oops! That username and password combination was incorrect.
    </div>
  </div>
</md-input-container>

This code worked with v0.11, but no longer works after bumping to 1.0. Looking into the DOM on the rendered page, the class md-auto-hide is getting applied to the ng-messages div. Removing this class restores the original behavior.

[vlio20]

@keithajackson, did you add some custom code to fix this?

[persimmons]

@vilo20 I was hoping to avoid it, but it's looking like I have to override a CSS style to make a workaround:

The offending rules (which are getting applied to the ng-message children, not the ng-messages parent, are:

md-input-container .md-auto-hide .md-input-message-animation:not(.ng-animate) {
    opacity: 0;
    margin-top: -100px;
}
md-input-container:not(.md-input-invalid) .md-auto-hide .md-input-message-animation {
    opacity: 0;
    margin-top: -100px;
}

[persimmons]

update: codepen with fix

GOT IT. I needed to disable auto-hiding on my ng-messages div, changing:

<div ng-messages="rgn.loginServerErrors" role="alert">

to

<div ng-messages="rgn.loginServerErrors" role="alert" md-auto-hide="false">

The md-input docs note that messages will automatically be hidden until the md-input-container sets an md-is-error expression. Since my use case doesn't use md-input-container for anything besides (essentially) styling, I'm handling the visibility myself through JS.

[persimmons]

Workaround: I made a somewhat fixed codepen off your issue, @vlio20 , by handling the visibility myself:

<div ng-messages="registrationForm.agencyName.$error" md-auto-hide="false" ng-if="registrationForm.agencyName.$touched">

The animations get weird, though when I follow the steps to reproduce. Both errors become visible for a moment, and then the minlength error disappears without an animation.

[vlio20]

@keithajackson, yea it worked! thanks!!! I think it should be the default behavior.
Now I have very long html tags :(

Thanks @keithajackson, I will close this issue.

[persimmons]

@vlio20 I think we should keep this open. The workaround fix still results in broken animations, so I think the underlying feature has a bug.

Open codepen, then:

1. focus on input.
2. enter 1 char & focus out (blur) -> minlength error message is displayed.
3. delete the char from step 2 -> second message slides in, bumping elements down. Then the first message disappears, snapping everything back up.

[brunsgaard]

Hi guys, thanks for the workaround. Keep the issue open I just ended up here having the same problem as you guys. Lets hope for a real fix soon that will also fix the animation.

[ThomasBurleson]

A full, valid PR would be welcomed.

[stephengardner]

Based on this conversation, ng-messages are effectively not working with angular material? Is that what I'm seeing?

[vlio20]

You are right. It's not even an edge case

[photusenigma]

+1

[dougpix]

+1

[volmerf]

+1

[jobo26]

+1

[pjwalmsley]

+1

[danidewitt]

+1

[galharth]

+1

[autumnfjeld]

+1

[tomiplaz]

+1

[pablozandona]

+1

[phxrefugee]

+1

[avilao]

+1

[mikila85]

?????

[rafaeldev]

Hi guys!

I have another scenario where the message doesn't works...
I need set some attributes (ng-pattern and required) on input after input render.

In debbuging I saw that line on code:

material/src/components/input/input.js

Line 1020 in e06284a

if (alreadyVisible || (messages.hasClass('md-auto-hide') && !container.hasClass('md-input-invalid'))) {

and don't know why the md-input-container haven't the class "md-input-invalid".

That behavior is expected?

An exemple:
http://codepen.io/rafaeldev/pen/wJgaZV?editors=1010

[topherfangio]

@mikila85 Are you still having issues? If so, please provide a Codepen so that we can investigate.

@rafaeldev It looks like the md-input-invalid class is not properly being applied to the parent <md-input-container>. I will look into this. In the meantime, here is a workaround that you can use to manually set the class: http://codepen.io/topherfangio/pen/PpQBvb?editors=1000

[offwork]

don't get this warning when you remove the

md-require-match

attribute in the $mdAtuocomplete

[topherfangio]

@offwork What warning? Can you elaborate?

[rafaeldev]

@topherfangio Thanks for reply e for help me!

[jellyfush]

I have a similar problem with firefox 52.0 on ubuntu, Chrome is fine. See http://codepen.io/anon/pen/vxRpJK the error shows then disappears.

[ghost]

Is this still an issue? there's no fix for this?

[jellyfush]

Its a bit of a pain but I found it best just to not use ng-message for server side errors in this case, I just use a loop/switch to display them styled the same way... similar to the way the document say's to display info underneath

[ghost]

@jellyfush Do you have an example of that? The problem is that I'm using ng-message, I don't understand why those messages work on the login example and not over the rest of the pages..

Thanks

[jellyfush]

@bruno-serfe Yea its kind of frustrating. Seems like some weird thing with the animation setting the opacity to 0 when finishing, could actually be an angular bug but haven’t looked into it enough.

If you wanted to do something similar to the ng-message you could reference this https://codepen.io/anon/pen/dRwXQE you could put a switch in there to render the message the way you want. Seems like a bit of an ugly hack, but works form me.

Of course if you were getting errors back from the server I would remove the ng-if and just have it print the returned error. Can be used in combination with ng-message but it looks as though only one can be active at a time otherwise they sit on top of each other

[beany-vu]

I also faced the issue. If I set the form's name with dash character "-", then it didn't show the error message. However, when I changed to camel case, it's okay.

[dmitryrogov]

I had a similar problem. As it turned out, one form was inside another one. Check your page layout

[Talhah]

I have finally found a solution that works for me with the help of @topherfangio

https://codepen.io/talhahm/pen/EEpyqv