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>
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.prototyperemoving this function solves the issue.