7

I'm trying to validate a variable as email inside Angular controller.

var valid = $filter('email')($scope.email);

The email filter doesn't exists, generates "unknown provider error". What's the correct way to access email validation from inside the controller?

Thanks.

Later edit: don't put me to create a custom filter, it must be a way using angular validation.

Alexandru R
  • 8,560
  • 16
  • 64
  • 98

3 Answers3

7

You can create a hidden input type email:

<input type="email" hidden id="emailValidator" required ng-model="x" />

Then in js set the value to that input and check validity:

var validator = $('#emailValidator')[0];
validator.value = "someemail@tovalidate.com";

return validator.checkValidity();

Also this documentation could be helpful: https://docs.angularjs.org/guide/forms

kazuar
  • 1,094
  • 1
  • 12
  • 14
  • 1
    I'm not asking about form validation. – Alexandru R Jun 24 '15 at 05:38
  • There is no form. The input field is a hack to solve this problem. I had exactly the same use case as you. I wanted to validate just a string and I used my solution to "hack" it that way instead of creating some cumbersome regex. Try it, it works. – kazuar Jun 25 '15 at 16:56
  • I have a list of emails I need to evaluate from a textarea. – Alexandru R Jun 27 '15 at 15:27
  • 1
    take your list of emails and loop through them and run the code I pasted on each of the email. Where's the problem? – kazuar Dec 02 '15 at 18:31
4

You could use form and prevent form submission by adding ng-disabled to the submit button:

<form name="form">
      <input type="email" ng-model="email" name="email" required/>
      <button type="submit"
        ng-disabled="form.$invalid">Submit</button>
</form>

{{form.email.$valid}}

As the point of validation is to prevent submission and show error messages. I think it's enough to do it there instead of controllers where you handle your business logic.

DEMO

Khanh TO
  • 48,509
  • 13
  • 99
  • 115
  • 2
    doesn't answer the question. How to access filter validation in controller? – Alexandru R Jun 23 '15 at 09:23
  • @Alexandru Rada: the approach of using filter to do form validation is not recommended. That's why I suggested another approach – Khanh TO Jun 23 '15 at 13:06
  • 2
    What makes you think I'm trying to do form validation? I'm trying to evaluate a string as email. And everybody answer is related to input fields. – Alexandru R Jun 24 '15 at 05:36
  • @Alexandru Rada: If you want to do validation for user inputs before sending to server, I think using this approach is recommended. If you want to do validation for other cases (like loaded data from server), maybe we can just create a utility service with regex – Khanh TO Jun 24 '15 at 13:02
  • 1
    Exactly that utility I'm looking for. With the help of angular built-in email filter. Now you got it right. – Alexandru R Jun 24 '15 at 16:27
3

You can write your own filter:

angular.module(/**some module description here**/).
   filter('email',function(){
       var validateEmail = function(email) { 
            var re = /^(([^<>()[\]\\.,;:\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 re.test(email);
       }
       return function(input){
            return validateEmail(input); 
       };
   });

Regular expression is borrowed from here

Community
  • 1
  • 1
Engineer
  • 47,849
  • 12
  • 88
  • 91
  • Why borrow from a SO question when you can just pick up the right expression from [the source code](https://github.com/angular/angular.js/blob/v1.6.10/src/ng/directive/input.js#L27) ? – svarog Apr 23 '18 at 10:52
  • @svarog there are lots of ways for email's regexps. I have chosen the one from SO answer. Everybody is free to use their own or borrow from somewhere – Engineer Apr 25 '18 at 06:02
  • you already get email regex validation out of the box (which you may already use in another part of your application), why add another and make implementation inconsistent ? – svarog Apr 25 '18 at 07:54
  • @svarog Yes, now it's native functionality, when I was writing my answer it was 2014 year :) . I am letting you to edit my answer with the following `However if you are using new angularjs, then you can use bla bla bla ...`. Or you can creat a new answer – Engineer Apr 25 '18 at 11:30