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
    };
});

check-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的原因已从角版1.6.1中删除在PHP文件中你没有回来＆＃34;好的＆＃34;它的返回＆＃34; Email-Id已经存在＆＃34;所以使用if for condition

Answer 2

Obserbvation：在ng-change函数内传递正确的模型值。

ng-change="check_email(emailid)" 应 ng-change="check_email(AddEmail.emailid)"

<强>样本

＆＃13;

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;
      }
    }
});

＆＃13;

<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>

＆＃13;

如果emailid已经使用angularjs退出，如何禁用提交按钮

2 个答案: