AngularJS ng-messages not hiding after valid input / Minified - bundled

111 Views Asked by At

I have an odd issue. All our md-input-containers with ng-messages in them are getting stuck after being minified/bundled and published.

Now it works the first few times but if you tab away on an error, come back and enter the correct data its stuck.

We are using this bundler/minifier. https://github.com/madskristensen/BundlerMinifier

We've tried AngularJS 1.6.3 and 1.7.7 but get the same result.

I read this post. https://github.com/angular/material/issues/2781 And can verify that we have ngMessages injected into our app and have angular-messages.js loading into the index.html page.

Through some testing I can see that signInForm.accessKey.$error object is changing (require = true added and removed). But the ng-message element isn't updating with those changes. Its like the watcher has stopped. I can add an ng-hide="signInForm.accessSecret.$error.required === undefined" to hide the message but that shouldn't be needed.

I'll also mention this works fine when ran unminified and unbundled. I have an issue in the github for the bundlerMinifer for this as well.

Any thoughts?

<form name="signInForm" ng-submit="vm.signIn()" style="width: 100%;">
 <md-input-container class="md-block">
  <label>Email address</label>
  <input name="accessKey" ng-model="vm.accessKey" type="email" required>
  <ng-messages for="signInForm.accessKey.$error" role="alert">
   <ng-message when="required">Email address is required.</ng-message>
  </ng-messages>
 </md-input-container>

 <md-input-container class="md-block">
  <label>Password</label>
  <input name="accessSecret" ng-model="vm.accessSecret" type="password" required>
  <ng-messages for="signInForm.accessSecret.$error" role="alert">
   <ng-message when="required">Password is required.</ng-message>
  </ng-messages>
 </md-input-container>

 <div layout="column" layout-align="start end">
  <md-button class="md-button ws-margin-0" ng-disabled="vm.$ws.isInCallback()" aria-label="Forgot password" ng-click="vm.forgotPassword()" style="text-transform: none !important; position: relative; top: -40px;">Forgot password?</md-button>
 </div>

 <div layout="column" layout-align="center center">
  <md-button type="submit" id="signInButton" class="md-button md-raised" ng-disabled="vm.signInForm.$invalid || vm.$ws.isInCallback()" aria-label="sign in" style="width: 100%; text-transform: none !important;">Sign in</md-button>
 </div>
</form>

1

There are 1 best solutions below

0
Zophar_Shinta On

Found the issue.

After removing everything from the bundler/minifier Json and slowly adding components I found a polyfiller causing the issue. The polyfiller is adding a function to Object.prototype removing this function solves the issue.