Disable Angular Form Validation on single input (url)

Question

I'm building an Angular form with a URL field that can be formatted either with a prefix (http://) or without. Using Angular's default url validation requires http://, so I plugged in the following regex, which accepts with and without a prefix:

<input type="text" id="siteAddress" name="siteAddress" ng-model="user.url" ng-pattern="/^(https?:\/\/)?([\dA-Za-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/" required>

This works great, but when I set type="url", Angular's validation overwrites my custom ng-pattern. This form is for mobile users only, so the type="url" is important so that they receive the correct keyboard, and so their mobile OS does not attempt to autocorrect their input.

Is it possible to use type="url" without Angular applying its default validation, or is it possible to modify Angular's default validation so that it accepts no url prefix?

Thanks!

Looks like the simplest solution might be to keep the input field type="text" and just add properties to disable spellcheck, auto capitalize, etc. autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" It works well. The only drawback is not getting the custom "url" keyboard that includes a .com button. I'll leave this question open a bit to see if anyone has any insights before closing. — idealboy
– idealboy, Commented Jan 27, 2014 at 1:33

GRaAL · Accepted Answer · 2014-01-27 08:35:28Z

3

It seems like there is no official API to do that but you always can override default directive or use your directive with higher priority to change the standard behavior.

For example, angular's input directive gets the type from $attributes object, so you may remove this attribute.

directive('ignoreType', function() {
    return {
        priority: 500,
        compile: function(el, attrs) { 
            attrs.$set('type', 
                null,                //to delete type from attributes object
                false                //to preserve type attribute in DOM
            );
        }
    }
});

Here is jsfiddle for it.

Of course this solution may also break behavior of other directives which work with type attribute, so use it carefully.

answered Jan 27, 2014 at 8:35

GRaAL

6264 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

idealboy Over a year ago

Thank you, this works perfectly! I created a jsfiddle that contains my regex for validating URL without http: jsfiddle.net/spidercoder/2cuQF. I wasn't able to find any documented solutions for bypassing default Angular form validation, so this is really valuable. Thanks for your help!

Fedaykin · Accepted Answer · 2014-01-27 01:44:32Z

0

An idea would be to test the $removeControl method from the FormController to see if the native url validation would go off... http://docs.angularjs.org/api/ng.directive:form.FormController

Inside your controller you would do something like this:

    $scope.form.$removeControl('siteAddress');

Im not sure exactly what it will do, since I haven't got the chance to test it out and the docs about this are incomplete... let me know if this works please.

Hope that could give you some help.

answered Jan 27, 2014 at 1:44

Fedaykin

4,5723 gold badges25 silver badges32 bronze badges

2 Comments

idealboy Over a year ago

I'm getting this Angular error: TypeError: Cannot call method '$removeControl' of undefined. I tried $scope.form.$removeControl('siteAddress'); as well as the form id: $scope.loginForm.$removeControl('siteAddress'); and got the same error. Thanks for the idea, though!

Fedaykin Over a year ago

Well it was worth a try... we should look after more documentation about this method.

Collectives™ on Stack Overflow

Disable Angular Form Validation on single input (url)

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related