URL type input does not support file:/// protocol.

[ghost]

Very easy to reproduce. Any form input of type 'url' will return undefined for a file:/// protocol entry.

To reproduce go to the following Plunker and enter 'file://some/file' to the input. The HTML5 validation succeeds, but the file protocol is not supported.

http://plnkr.co/edit/ywKtnQQWzWZqdG9gKccS

[andrewaustin]

The problem here is that ng/directive/input.js has the following regular expression

var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

This is insufficient.

For input[type=url], the html5 spec says:

The input element represents a control for editing a single absolute URL given in the element's value.

It later says :

URL :: A valid IRI reference as defined in [RFC 3987].

RFC3987 and RFC3986 provide more details on what a valid IRI is. Specifically, one part that is failing is the scheme.

A scheme's is defined as:

ALPHA *( ALPHA / DIGIT / "+" / "-" / "." )

Angular only accepts ftp, http, and https.

Since I doubt anybody is interested in going down the rabbit hole of writing a regular expression to try to match the full grammar, I propose the following small changes to the existing REGEX:

var URL_REGEXP = /^([0-9]+|\w+|\.|\+|\-)+:\/?\/?(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;

The two changes are 1) allow more permissive schemes and 2) make the two slashes optional as defined by the RFC.

You can see my changes and a bunch of extra unit tests in #11381.

(To help with understanding the regex see https://regex101.com/)

[SummerSun]

Finally found a issue related to the customized protocol. All issues about url validation says nothing about this.
We do need to customize some protocols for specific use. And the pattern ^(ftp|http|https) makes all customized ones invalid.
Add another question, for those invalid url, what Angyalr gonna deal with it? I saw it just removes the ":" in my scenario. Like this one: file://https://www.google.com, be changed to file://https//www.google.com. Why did this kind of process?

[andrewaustin]

@SummerSun Have you looked at #11381? I believe it fixes the issue you bring up.

[SummerSun]

Yes, I checked the regex, it fixes the problem. Never mind, I asked a question which I figured out that it's not Angular, but jQuery issue.