如何禁用提交按鈕，如果emailid已經退出使用angularjs

Question

我想要禁用提交按鈕，如果emailid已經退出數據庫中使用angularjs。但我不知道怎麼做

這裏是在上面的代碼我的html代碼

<div data-ng-cloak data-ng-app="AddEmailModule" data-ng-controller="AddEmailController"> 
    <form class="form-horizontal" role="form" id="AddEmailForm" name="AddEmailForm" autocomplete="off" enctype="multipart/form-data" novalidate="" data-ng-submit="AddEmailData(AddEmail)"> 
     <div class="col-sm-6"> 
      <label for="emailid">Email-Id</label> 
      <input type="email" class="form-control" placeholder="Email-Id" id="emailid" name="emailid" pattern="^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,5}$" required ng-change="check_email(emailid)" data-ng-model="AddEmail.emailid">      
      <div class="error" data-ng-show="AddEmailForm.emailid.$dirty && AddEmailForm.emailid.$invalid"> 
       <small class="error" data-ng-show="AddEmailForm.emailid.$error.required">Email-Id is required.</small> 
       <small class="error" data-ng-show="AddEmailForm.emailid.$error.email">Invalid Email-Id.</small> 
      </div>           
      <p><strong class="error">{{getEmail}}</strong></p> 
     </div> 
     <button type="submit" class="btn btn-theme" data-ng-disabled="AddEmailForm.$invalid">Add</button> 
    </form> 
</div> 

提交按鈕默認情況下禁用它將使只有EMAILID被填滿。但如果電子郵件ID已經是數據庫，我想禁用該按鈕。

這是我的AngualarJS代碼。

var AddEmail = angular.module("AddEmailModule", []) 
AddEmail.controller("AddEmailController", function ($scope, $timeout, $http, jsonFilter) 
{ 
    var logResult = function (data, status, headers, config) 
    { 
     return data; 
    }; 

    $scope.check_email = function(emailid) 
    { 
     $http.post('check-email.php', { 'emailid': $scope.AddEmail.emailid }) 
     .success(function (data, status, headers, config) 
     { 
      $scope.getEmail = logResult(data, status, headers, config); 
     }); 
    }; 

    $scope.AddEmailData = function (AddEmail) 
    { 
     //Add code comes here 
    }; 
}); 

檢查email.php顯示好如果EMAILID可用且電子郵件-ID已經存在如果EMAILID已退出。現在我有點困惑如何禁用基於這些消息的提交按鈕？

任何幫助/建議？

Answer 1

創建布爾變量，如果電子郵件已經存在使變量真正

var AddEmail = angular.module("AddEmailModule", []) 
AddEmail.controller("AddEmailController", function($scope, $timeout, $http, jsonFilter) { 

    $scope.emailExist = false; 

    var logResult = function(data, status, headers, config) { 
     return data; 
    }; 
    $scope.check_email = function(emailid) { 
     $scope.emailExist = false; 
     $http.post('check-email.php', { 
       'emailid': $scope.AddEmail.emailid 
      }) 
      .success(function(data, status, headers, config) { 
       $scope.getEmail = logResult(data, status, headers, config); 
       $scope.emailExist = true; // make this true if email exist 
      }); 
    }; 
    $scope.AddEmailData = function(AddEmail) { 
     //Add code comes here 
    }; 
}); 

在ng-disabled使用多個條件

<button type="submit" class="btn btn-theme" data-ng-disabled="AddEmailForm.$invalid || emailExist">Add</button> 

EDITED

請更換check_email功能與此

$scope.check_email = function(emailid) 
    { 
     $scope.emailExist = false; 
     $http({ 
      url :'http://localhost:8080/app/check-email.php', 
      method : 'POST', 
      data : { 
      'emailid': $scope.AddEmail.emailid 

      } 
     }).then(function(response){ 
      $scope.getEmail = logResult(response.data); 
      if(response.data=="Email-Id already exists") 
      { 
       $scope.emailExist = true; 
      } 
     },function(response){ 
      $scope.emailExist = false; 
     }) 
    }; 

的原因，我使用then是success是從PHP文件角版本1.6.1 刪除不必返回「OK」返回其「電子郵件-ID已經存在」，因此使用的，如果條件

Answer 2

Obserbvation：在ng-change函數內傳遞正確的模型值。

ng-change="check_email(emailid)"應該ng-change="check_email(AddEmail.emailid)"

DEMO

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl',function($scope) { 
 
    $scope.emailExist = true; 
 
    $scope.alreadyRegMail = 'test@gmail.com'; 
 
    $scope.check_email = function(emailid) { 
 
     if(emailid == $scope.alreadyRegMail) { 
 
     $scope.emailExist = true; 
 
     } else { 
 
     $scope.emailExist = false; 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
     <form class="form-horizontal" role="form" id="AddEmailForm" name="AddEmailForm" autocomplete="off" enctype="multipart/form-data" novalidate="" data-ng-submit="AddEmailData(AddEmail)"> 
 
     <div class="col-sm-6"> 
 
      <label for="emailid">Email-Id</label> 
 
      <input type="email" class="form-control" placeholder="Email-Id" id="emailid" name="emailid" pattern="^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,5}$" required ng-change="check_email(AddEmail.emailid)" data-ng-model="AddEmail.emailid">      
 
      <div class="error" data-ng-show="AddEmailForm.emailid.$dirty && AddEmailForm.emailid.$invalid"> 
 
       <small class="error" data-ng-show="AddEmailForm.emailid.$error.required">Email-Id is required.</small> 
 
       <small class="error" data-ng-show="AddEmailForm.emailid.$error.email">Invalid Email-Id.</small> 
 
      </div> 
 
     </div> 
 
     <button type="submit" class="btn btn-theme" data-ng-disabled="AddEmailForm.$invalid || emailExist">Add</button> 
 
    </form> 
 
</div>