Angular validate input type="email" as type="text"

Question

My Angular app has a login form with an email/username input field:

<input type="email" required/>

Input is type="email" so the correct keyboard is displayed in iOS.
However validation should be that of a type="text" input to allow for a username.

Basically I need override Angular to validate type="email" as type="text"
Here is a basic Plunker to get started.

Note: I've tried using ng-pattern to validate on regex but it only seems to work for type="text"

Answer 1

I don't think it's possible to change how input type='email' is handled in angular without changing it's source, but maybe instead you could try to:

<input type="text" required late-email />

angular.module('yourApp').directive('lateEmail', function () {
    return {
        priority: -1,
        link: function(scope, elem, attrs) {
            elem.attr('type', 'email');
        }
    };
});

Important thing here is priority, as angularjs input directive needs to run(link) first so will use 'text' as input type, then lateEmail will change input type to email.