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

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>