Material: ng-messages doesn't hide when input is valid

[smehrbrodt]

The message should be hidden once there is some input in the field.

[smehrbrodt]

I found out that when using <ng-message> as element instead of an attribute, it works as expected:

  <md-input-container flex>
    <label translate>First Name</label>
    <input name="firstName" ng-model="person.firstName" required>
    <div ng-messages="personEdit.firstName.$error">
      <ng-message when="required" translate>This field is required.</ng-message>
    </div>
  </md-input-container>

Is this a material or angular bug?

[mafredri]

It's not entierly obvious when reading the documentation, but you need ngMessages for errors, as can be seen here: https://material.angularjs.org/#/api/material.components.input/directive/mdInput. If that's not the problem, what version of angular are you using?

[smehrbrodt]

That was the problem, many thanks for the hint!

[brianmuks]

This "ng-message" is used as an attribute on angular material demos https://material.angularjs.org/latest/demo/input

[ady236]

I had similar issue. I just added ngMessages dependency in module in app.js. Solved my problem.

[danillobarbosa]

Just add ngMessages directly in your module.

This works.

:)

[littlemercury]

Fixed my issue too - thank you!

[mostafabarmshory]

Fixed my issue too, thank you very much

[ghost]

Why Not add this part to documentation?

[marcoskubis]

Sometimes I also don't read all.

[mcianc]

Same issue with attribute directive don't seem work.

I resolved like told by
"smehrbrodt commented on 8 May 2015

Using element instead attribute all work like a charm

(using angular 1.5.8)

[derek1906]

It is also stated in the documentation of ng-input:

Notes:

• Requires ngMessages.
• Behaves like the AngularJS input directive.

[ersingencturk]

this definitely should be highlighted better in the documentation.how about a

<h1> tag to the explanation?

[Splaktar]

This is now also part of the blank shell CodePen in the "Getting Started" Guide and there is a section in the same guide that breaks down the optional dependencies.