Material: input-container: not showing ng-messages error by default even when md-auto-hide="false" is applied

[vinhnghi223]

Actual Behavior:

• What is the issue? *: Under md-input-container, when applied md-auto-hide="false" tong-messages, error message(s) is not shown by default.
• What is the expected behavior?: If the input is invalid, error message(s) should be shown by default when md-auto-hide="false" is applied on ng-messages.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/vinhnghi223/pen/JRyoXJ ( I used the same example from Angular Material Input Errors demo: https://material.angularjs.org/latest/demo/input) (The Hourly Rate (USD) example)
• Details: I realized that the reason why the example on Angular Material Input Errors demo works is each tag, where ng-message resides, has an inline styles of style="opacity: 1; margin-top: 0px;".

Angular Versions: *

• Angular Version: 1.5.5
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Any
• Browser Version: * Any
• OS: * Any
• Stack Traces: Any

[vinhnghi223]

Currently my quick and dirty fix in our project is:

Add these lines of code to
https://github.com/angular/material/blob/master/src/components/input/input.scss

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

This ensure that the error message will be appeared from the start when there is no md-auto-hide.

Also I replaced this logic:
https://github.com/angular/material/blob/master/src/components/input/input.js#L993-L995
with this:

if (messages.hasClass('md-auto-hide') && !container.hasClass('md-input-invalid')) {
    return $animateCss(element, {});
}

if (alreadyVisible && !messages.hasClass('md-auto-hide') && container.hasClass('md-input-invalid')) {
   return $animateCss(element, {});
}

Still the label is NOT colored red by default. I have tried this but it didn't work:

.ng-pristine, .ng-invalid{
  md-input-container {
    label ~ .md-input-messages-animation:not(.md-auto-hide){
      color:red;
    }
  }
}

I guess to make that possible some logic inside inputTextareaDirectiveshould be changed.

[mikila85]

+1

[bruno-serfe]

Hi there, Is this still an issue?

[Splaktar]

Fixed in 1.1.5 via https://github.com/angular/material/commit/0151b4bed9d90aa942734591615878f5fcc0fe52.