CODEWITHSUNDEEP
javascriptangularjs
lucassp
lucassp

Reputation: 4167

AngularJS form field is dirty and invalid when page loads on IE10 only

I have a simple login form which on IE10 always has the form fields invalid when the page loads without the user doing something.

The form fields are really simple:

<input type="text" required class="input-block-level" placeholder="username" ng-model="username" name="username" tabindex="1">
<p class="text-error" ng-show="loginForm.username.$dirty && loginForm.username.$invalid">
    <span ng-show="loginForm.username.$error.required">required</span>
</p>

http://plnkr.co/edit/DNUanGGaZDgFWYrm3gLK?p=preview

In the plunker above you can reproduce the issue by focusing on the field while inside my app the error field is displayed when the page loads. In other browsers it works just fine.

Upvotes: 9

Views: 5421

Answers (2)

leal lee
leal lee

Reputation: 1

My workaround:

Add ng-if="true" to the input element.

Tested only on angular 1.2.28.

Upvotes: 0

Aaronaught
Aaronaught

Reputation: 122684

Somebody wrote a gist for this, which I've reproduced below with all the necessary boilerplate:

angular-hacks.js:

(function (window, angular, undefined) {
    'use strict';
    var hacks = angular.module('hacks', []);
    hacks.config(['$provide', function ($provide) {
        $provide.decorator('$sniffer', ['$delegate', function ($sniffer) {
            var msie = parseInt((/msie (\d+)/.exec(angular.lowercase(navigator.userAgent)) || [])[1], 10);
            var _hasEvent = $sniffer.hasEvent;
            $sniffer.hasEvent = function (event) {
                if (event === 'input' && msie === 10) {
                    return false;
                }
                _hasEvent.call(this, event);
            }
            return $sniffer;
        }]);
    }]);
})(window, window.angular);

I haven't had any problems with this so far, although I won't pretend that I've put it through any serious regression testing. It's filtering out all the input events for IE10 and might need to be made more specific.

Upvotes: 4

Related Questions