Angular conditional email validation

Question

How can I conditionally use angular's email validation based on the presence of another scope variable? I looked through the documentation but the only way I can find to trigger email validation is to use input type="email", which in this case I cannot use due to the dependence of another directive on type="text".

Ideally I'd either like to assign ng-match="email" based on the value of another scope variable, or just validate the email programatically on submission. In theory I could just a separate email validation regex but if possible I'd like to use Angular's validation since I use that everywhere else.

Thanks

-- Edit: To clarify, I specifically would like to use angular's native email validation in whatever solution I end up using.

Yeah I know I can do that, but how can I use angular's native email validation in that directive, if I go that route? — jraede
– jraede, Commented Jan 26, 2014 at 22:26
You can set a higher priority for your directive than the email one.(assuming you are treating your process in the linking function of your directive). So that the email validation would occur BEFORE the process of your custom directive. — Mik378
– Mik378, Commented Jan 26, 2014 at 22:28
Ok, but I only want the email validation to occur some of the time. If it occurs before my directive won't it execute all the time? Or, do you mean to use the second directive to override the $invalid setting the field would get if it's not an email? — jraede
– jraede, Commented Jan 26, 2014 at 22:30
If you want a behavior strictly based on your proper conditions, make your input as type="text", and just implement a regexp in your directive to mimic the email's one. — Mik378
– Mik378, Commented Jan 26, 2014 at 22:34

Tome Pejoski · Accepted Answer · 2014-01-26 23:11:13Z

2

You should use ng-required and ng-pattern on the email input field.

<input type="text" ng-model="email" ng-required="emailRequired" ng-pattern="emailPattern" />

And then define emailPattern as function on the $scope of your controller.

$scope.emailPattern = (function() {
var regexp = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return {
    test: function(value) {
        if( $scope.emailRequired === false ) return true;
        else return regexp.test(value);
    }
};

})();

The following fiddle implements what you want:

http://jsfiddle.net/9SSE4/

answered Jan 26, 2014 at 23:11

Tome Pejoski

1,5802 gold badges11 silver badges34 bronze badges

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

4 Comments

jraede Over a year ago

Right, but no way to use angular's regex without copying it explicitly?

Tome Pejoski Over a year ago

No, because angular's regex email validation works only with input of type="email".

Tome Pejoski Over a year ago

You can try by yourself directly on the angular's documentation example. Here: jsfiddle.net/5uW2U

jraede Over a year ago

Ok but my question was "How can I conditionally use angular's email validation", not a different email validation. But from what you're saying it looks like I can't use it like that.

chris · Accepted Answer · 2015-07-03 18:28:17Z

0

Could you change the type of the input? If the input should be validated as an email then set its type to an email, else set it to text.

<input type="{{vm.type}}" ng-model="vm.text" />
<select ng-model="vm.type">
  <option>text</option>
  <option>email</option>

Example Plunker

answered Jul 3, 2015 at 18:28

chris

2,8983 gold badges27 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular conditional email validation

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related