Я хочу отключить кнопку отправки, если 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 уже завершен Теперь я немного запутался, как отключить кнопку отправки на основе этих сообщений?
Любая помощь / предложение?
Наблюдение: Передайте правильное значение модели внутри функции 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>
создать булеву переменную и, если электронная почта уже существует, сделать переменную 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