mdInput messages show animation called on invalid messages element:

Question

Not sure why I'm getting the following message. Has anyone else encountered this in AngularJS/Angular Material? What am I doing wrong? The message itself seems a little vague.

mdInput messages show animation called on invalid messages element:
md-input-container.md-block.md-icon-right.md-default-theme.md-input-has-value

Mure

I just started getting this also, let me know if you find a solution. – Deluca

I had a similar issue and I fixed it by setting form tag name attribute the same way ng-messages was expecting it to be – Comity

my problem resolved by adding the name to input. – Volost

Answer 1

Old question, but just in case anyone bumps into this, you need to supply an error message for the input field. The error is saying that it can't animate the error message into view because the messages element is missing.

In your md-input-container include the ng-messages element to handle the error. For example, if you have a form called myFrm with a required email address input named email, your code would be something like this:

<form name="myFrm">
  <md-input-container>
    <label>Email Address</label>
    <input type="email" ng-model="myFrm.email" name="email" required/>
    <div ng-messages="myFrm.email.$error">
      <div ng-message="required">Email address is required</div>
    </div>
  </md-input-container>
  <!-- Other form elements.... -->
</form>

Triquetrous

Hi @AmmarHasan, I just hide my ng-messages div keeping the internals ng-message's divs even making them useless: ex: <div ng-messages="myForm.email.$error" ng-hide="true"><div ng-message="required"></div></div> – Selfconsistent

ng-hide="true" Not help at all. – Facility