Angular materials ng-messages don't disappear after resolving

Question

I'm trying to use the Angular Materials snippet for a form input field with ng-messages for displaying error messages.

When I clear and fill this field multiple times, it somehow stores the 'old' error messages, showing x times 'Address is mandatory'.

If I remove the element outside the md-input-container, it works fine (but I want the ng-messages inside the md-input-container obv).

<div layout-gt-sm="row" ng-show="showAddress">
    <md-input-container class="md-block" flex-gt-sm="">
        <md-icon md-font-library="material-icons">home</md-icon>
        <label>Adres</label>
        <input ng-model="address" name="address" required />
        <div ng-messages="orderForm.address.$error" role="alert">
            <div ng-message="required">Address is mandatory</div>
        </div>
    </md-input-container>
</div>

Update: Ok I was using an older version of Angular and Angular-Animate (1.3.15). Updating this resulted in the fix.

score 12 · Answer 1 · answered Jan 12 '16 at 19:08

First check if you have ngMessages injected in your module again, second you can check if you have a form with the name 'orderForm' and last you must check if your ng-model has a controller or something where you have the data.

   

 <html>

    <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <style type="text/css">
        
      </style>
    </head>

    <body ng-app="testApp" ng-controller="AppCtrl">
       <form name="orderForm">
       <div layout-gt-sm="row" >
        <md-input-container class="md-block" flex-gt-sm="">
            <label>Address</label>
            <input ng-model="address" name="address" required />
            <div ng-messages="orderForm.address.$error" role="alert">
                <div ng-message="required">Address is mandatory</div>
            </div>
        </md-input-container>
    </div>
         </form>
     <script type="text/javascript">
            var app = angular.module("testApp", ["ngMaterial","ngMessages"])
                             .controller('AppCtrl', function($scope) {
                                   $scope.address = 'Prueba';
                                 });
      </script>
    </body>

    </html>

None of the solutions helped, unfortunately. I have a controller, form-name, ngMessages. Everything works as well, except that the 'error-message' is not removed. There must be some conflict, but I have no clue where to look for. Trying to strip down my dependencies, but that's a long road :( — Norbert Huurnink, Jan 12 '16 at 19:45

score 7 · Answer 2 · answered Jan 10 '16 at 19:58

7

Had the same issue, installing ngMessages into your app resolved this issue for me.

answered Jan 10 '16 at 19:58

user3738381

71
2

I already have ngMessages injeceted in my module, if that is what you mean. – Norbert Huurnink Jan 12 '16 at 18:24
You have to import the angular-messages lib as well as inject into your module. – BatteryAcid Jun 03 '17 at 17:10

Angular materials ng-messages don't disappear after resolving

2 Answers2