1

I am learning AngularJS. I am trying to make a custom directive that checks if email already exists. I get my emails from array that has like 9 users and I can successfully get them using Factory. My problem with my custom directive is that no matter what input I enter the button will be disabled. The idea of the directive is when I lose focus it will check if the email exist or it doesn't if it does it will disable the button if it doesn't then the button will be enabled.

.directive("registerUser",function(){
                            return {
                             
                                link:function($scope, element) {
                                    element.bind('blur',function () {
                                        var emailInput = element.val();
                                        var flag = "false";
                                        $scope.registeredUsers.forEach(element => {
                                            if(emailInput === element.email){
                                               flag = "true";
                                               console.log(emailInput);
                                               console.log(flag);
                                               return;
                                            }
                                        });
                                        $scope.invalidemail = flag;

                                    });}
                           }
                         })

That is my directive as you can see I tried using flags it didn't work I tried changing the flag to booleans still not working I will also show my HTML. I am not sure if var emailInput = email.val() making problems to me because I am not using ng-model.

<form action="">
    <input type="text" name="emailField" ng-model="emailInput" register-user>
    <input type="button" name="" value="check" ng-disabled= invalidemail>
</form>

That is my HTML. Note I am not checking if email is valid in this task. I am just checking if the email already exist in my array or not.

double-beep
  • 5,031
  • 17
  • 33
  • 41
Louay Saeed
  • 11
  • 2

1 Answers1

1

The value of flag is being set to a string of "true" or "false" instead of boolean values of true or false.

// not "false"
var flag = false;
// subsequently set it to true not "true"

Your form template has a space between ng-disabled and the bound value.

<input type="button" name="emailButton" value="check" ng-disabled="invalidemail" />

You can also write this more concisely using Array.some() to see if the array contains your value.

const emailInput = element.val();
$scope.invalidemail = !$scope.registeredUsers.some(element => emailInput === element.email);
doublesharp
  • 26,888
  • 6
  • 52
  • 73
  • i used your method and i logged the value it is returning true and false properly. however the ng-disabled is not changing at all ! – Louay Saeed Sep 15 '20 at 07:39
  • @LouaySaeed can you add `{{ invalidemail }}` on the page to see if the true/false shows up properly? – doublesharp Sep 15 '20 at 16:32
  • It doesnt, i think there is something wrong in the directive. Because for example if i enter and i try the first time it shows right i enter focus again it doesnt work i have to refresh the page for it work. Lets say i enter existing email it will show true and disable the button if i delete my input and add email that doesn't exist it will still show true. if i refresh the page and i enter email that doesn't exist it will show false and disable the button and if i enter email that exists it will also remain false. Note sometimes it changes after trying several times i dont know how.. sth wrng – Louay Saeed Sep 15 '20 at 18:12