Menu
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"
610
When you create an email input with the proper type value, email , you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate e-mail address. This can help avoid cases in which the user mistypes their address, or provides an invalid address.
The <input type="email"> defines a field for an e-mail address. The input value is automatically validated to ensure it is a properly formatted e-mail address. To define an e-mail field that allows multiple e-mail addresses, add the "multiple" attribute.
We can also validate an email using pattern attribute in template-driven forms. To use PatternValidator, we'll add pattern attribute to the form input controls. It'll check whether the value matches with the supplied regex pattern or not and based on that it'll update the validation status of the input.
2 Methods of email validation in Angular Built-in validator: Angular features several built-in email validators, including EmailValidator. You can use them to verify the user-provided email addresses. Pattern validation: Pattern validation enables you to specify a regular expression (regex).
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.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
