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

Question

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.

Answer 1

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.