Material: input-container: ng-messages are no longer hidden on form reset as of 1.1.1

[tom94zoe]

Actual Behavior:

• I tried to hide ng-message with the following code, since Angular Material 1.1.1 the message wasn't hidden on reset.

<md-input-container flex style="margin-top: 0;margin-bottom: 5px">
        <label translate>maintenanceMessage.description</label>
        <input md-maxlength="40" required name="description" md-no-asterisk
               ng-model="maintenanceMessageCtrl.newMaintenanceMessage.description" flex>
        <div ng-messages="maintenanceMessageForm.description.$error" ng-show="maintenanceMessageForm.description.$touched">
          <div ng-message="required" translate>maintenanceMessage.description.requiredMessage</div>
          <div ng-message="md-maxlength" translate>maintenanceMessage.description.maxLengthMessage</div>
        </div>
</md-input-container>

ctrl.resetFormAndHideDialog = function () {
      ctrl.newMaintenanceMessage = {};
      $scope.maintenanceMessageForm.$setUntouched();
      $scope.maintenanceMessageForm.$setPristine();
     };

Angular Versions: *

• `Angular Version:1.5.8
• Angular Material Version:1.1.1

[botjaeger]

yea me too, i'm experiencing that kind of issue. so i decided to go back to Angular Material Version 1.1.0rc5

[botjaeger]

hope someone can help us here. cause i really need the new browser color feature of new update in angular material

[tom94zoe]

That would be fine, but I think this bug will be fixed with 1.1.3. So we have to wait some weeks.

[ThomasBurleson]

@tom94zoe - can you provide a CodePen for use to verify fixes?

[rhinoceraptor]

@ThomasBurleson Here is a codepen I made showing the bug:

https://codepen.io/rhinocerapt0r/pen/ORBQJZ?editors=1011

To replicate it, focus and un-focus the text field, then hit the reset button. The error message should be hidden, but isn't.

[clshortfuse]

@rhinoceraptor Thanks! This does confirm my suspicion that this is related to ngAnimate. I believe I had commented before on a similar issue where I mentioned we have solution built in an internal PR. The code will need to be cherrypicked.

[rhinoceraptor]

I forgot to mention, if you change the version of the Angular material CSS and JS to 1.0.9, you can see it working properly.

[rhinoceraptor]

I think this is a duplicate issue. I couldn't downgrade my version of angular material, so I used this CSS workaround:

.ng-untouched ~ .md-input-messages-animation {
  opacity: 0;
}

[samithaf]

@rhinoceraptor the fix is working but there is a small UI defect and can be fixed by adding following.

 .ng-untouched ~ .md-input-messages-animation {
    height: 0;
    opacity: 0;
  }

[topherfangio]

I'm removing the has: Pull Request label because that PR does not properly fix all of the issues. We will try to provide a different fix for this.

[Splaktar]

This is fixed in 1.1.10 as seen in this updated CodePen.

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