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.