Как отключить кнопку отправки, если emailid уже завершен с помощью angularjs

Я хочу отключить кнопку отправки, если 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>

в приведенном выше коде кнопка отправки по умолчанию отключена, она активирует только заполненный адрес электронной почты. но я хочу отключить кнопку, если идентификатор электронной почты уже является базой данных.

Вот мой код 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 доступен и Идентификатор электронной почты уже существует если emailid уже завершен Теперь я немного запутался, как отключить кнопку отправки на основе этих сообщений?

Любая помощь / предложение?

0

Решение

Наблюдение: Передайте правильное значение модели внутри функции 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>
2

Другие решения

создать булеву переменную и, если электронная почта уже существует, сделать переменную true

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>

РЕДАКТИРОВАНИЕ

пожалуйста замените 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-файле вы не возвращаете «OK», а возвращаемый «Email-Id уже существует», поэтому используйте это для условия if

2

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector