Material: 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

[destegabry]

+1

[alexilyaev]

I have an <md-checkbox> that I'm trying to show an error for when not selected, on form submit.

<md-input-container class="md-block">
  <md-checkbox name="tos" ng-model="Register.tosAgreed" required>
    I agree to the Terms of Service
  </md-checkbox>

  <div ng-messages="Register.basicForm['tos'].$error">
    <div ng-message="required">You must accept the Terms of Service.</div>
  </div>
</md-input-container>

The error doesn't show when submitting, mainly because md-input-invalid is not added to the md-input-container like it does with regular inputs.

[vianneyniji]

+1

[alexilyaev]

@ThomasBurleson I see the issue is closed, can you tell us what was the solution?
Will my example above be fixed?

Edit:
Read Spring Cleaning, opened a specific issue with CodePen repro: https://github.com/angular/material/issues/8267

[brianfeister]

+1... this issue has been a huge problem for my team for a long time and was excited to find it addressed in a bug report and now disappointed to see that it's closed.

[akiro]

+1

[davidcestare]

+1

[vlio20]

@ThomasBurleson, is this issue resolved?

[smolyakoff]

+1 This bug needs a proper fix

[jpmermoz]

+1 here

[PAKISTANESSS]

+1, release a fix please.

[engineerkhushal]

For those who are seeking a custom fix here is one.

1. Define this css

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

.ng-messages-fix{
  visibility: hidden;
}

And then use ngMessages like these

<div ng-messages="form.inputField.$error" ng-class="{ 'ng-messages-fix' : !form.inputField.$touched}">
    <div ng-message="required">required</div>
    <div ng-message="maxlength">length exceeded</div>
    <div ng-message="pattern">not acceptable</div>
</div>

[mdelafuq]

+1

[RajanRastogi]

+1

thanks for the workaround, but love to see this fixed.

[BevanR]

+1

@engineerkhushal; This doesn't seem to work with <md-checkbox>. Any ideas?

[EricWVGG]

+1

[ymind]

+1

[vlio20]

@pandales, can you please supply some code, or even better create a pen or plunker?

[pandales]

@vlio20 this is the code that I did.

Email address
name="email"
ng-model="form.account.email"
required>

  <div ng-messages="accountForm.email.$error" ng-show="accountForm.email.$touched">
    <div ng-message="required">This is required!
    </div>
    <div ng-message="email">This field must be a valid email
    </div>
  </div>
</md-input-container>

Adding the ng-show directive to the ng-messages div guarantees that the md-auto-hide directive don't be evaluated, and use the .$touched state in the form guarantees that the messages only are shown after the input is focus.

[techno2mahi]

@keithajackson, I have tried your custom server messages plunker it seems not working.

The error message is displaying no matter what I set to the loginFailed variable in the javascript.

[techno2mahi]

Hi,

I was trying to implement a custom server side error message display at md-input containetr. The plunker is here.

Here I can set the error class at the md-container so the level and the red botton border is highlighted. But I am unable to show the error message for the same.

Can anyone have a look . what I am doing wrong.

[nuragic]

Still broken, I'm using v1.1.1.

The problem seems to be the the ng-animate class not being applied properly to the message element (only applied to the parent ng-messages not to the child ng-message). So this rule is hiding the error message because he doesn't have the ng-animate class.

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

Anyone working on it? Thanks!

[Ponjimon]

I can't really believe this issue is not fixed yet. It has been reported 10 months ago.
I'm also having it.
+1

[mcianc]

+1
Same for me... it's an important fix

[vlio20]

@ThomasBurleson, this issue should be reopened as it still breaks in v1. 1.1 as @nuragic pointed.

[jammed343]

The animations are completely broken and unusable.
If you enter a letter and then remove it. Then enter it again, then remove it, required error messages for example, disappear.

Either animations should be disabled or fixed, currently this is very unstable

[ThomasBurleson]

Based on community feedback, reopening.
@clshortfuse - may be related to other animation/ngMessage fixes.

[kuhnroyal]

I adapted the provided sample to 1.1.1 and angular 1.5.5 and it seems to be working. Maybe a problem with older ngMessage versions?

http://codepen.io/kuhnroyal/pen/LRBojo

[ThomasBurleson]

@kuhnroyal - Thanks for the update. We will confirm and close.

[nuragic]

@ThomasBurleson @clshortfuse

Please take a look at http://codepen.io/nuragic/pen/QKVYBg?editors=1010 to see the unexpected behavior. Error messages are there but they are not visible... 😕

[clshortfuse]

@nuragic Thanks for this! The issue seems to stem from an issue related to the element's lifecycle and calling of ngAnimate. This has been resolved in a WIP PR related to CSS density. I will try to see if I can cherrypick portions of that PR to quickly this issue.

[nuragic]

@clshortfuse You're welcome! Glad to see this issue is being addressed and we're in the right direction :) Let me know if there's anything more I can do to help. Thanks!

[kuhnroyal]

Good find, the original issue doesn't occure anymore, as far as I can tell tho.

[topherfangio]

@nuragic I believe your issue is related to https://github.com/angular/material/pull/9473 which should hopefully be merged soon.

Additionally, I just pushed a PR related to ng-messages with Autocomplete, but it could be affecting standard inputs too: https://github.com/angular/material/pull/9909

@vlio20 @jammed343 @mcianc @lookapanda If your issue doesn't relate to one of these, could you please provide an updated Codepen which shows the issue so we can investigate?

I'm also adding myself to the thread so I can keep up with it better.

[vlio20]

@topherfangio , seems like this is solved. Thanks a lot

[kadoshms]

There's a workaround for this issue:

By adding a ng-show="Form.fieldName.$touched" to the ng-messages directive.
That actually made the validation work as expected, including the animation.

[alexrojaslara]

+1

thanks a lot! It worked for me!

[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:
https://github.com/angular/material/blob/e06284aa4745dd7323a872a0a9290fd026747e30/src/components/input/input.js#L1020

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.

[bruno-serfe]

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

[bruno-serfe]

@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