Отключить кнопку после формы submit

Question

Звучит легко и хорошо известно, верно? Я так и думал. Как это сделать в angularJS.

CSHTML

@using (Html.BeginForm("Order", "Shop", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) 
{ 
<div class="container" ng-app="order" ng-controller="orderController"> 
     <button type="submit" ng-disabled="orderButtonClicked" ng-click="orderClicked()" class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button> 
</div> 
} 

AngularJS

angular.module("order", []) 
.controller("orderController", ['$scope', '$http','$filter', function ($scope, $http, $filter) { 

    $scope.orderButtonClicked = false; 

    $scope.orderClicked = function() { 
    $scope.orderButtonClicked = true; 

    }  
}]); 

Как и многие другие сообщили, а форма не подает при отключении или удалении кнопки. this Ответ сделал то же самое, он утверждает, что он работает, но для меня нет выхода.

Вы можете предположить, что угловая установка настроена правильно, отключение кнопки работает нормально.

Answer 1

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

Вместо этого, я вообще скрыть кнопку отправки, и заменить его на что-то подходящее:

<button type="submit" ng-show="!orderButtonClicked" ng-click="orderClicked()" class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button> 
    <button ng-show="orderButtonClicked" disabled class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button> 

Имейте в виду, что даже в этом случае, пользователь может иметь возможность повторно представить, нажав ввести в текстовое окно.

Answer 2

Предоставляет ли форму сообщение, если вы не отключите или не удалите кнопку? В «angular documentation» указано, что «по этой причине Angular предотвращает действие по умолчанию (отправка формы на сервер), если только элемент <form> не имеет указанного атрибута action».
Итак, в зависимости от того, что вы пытаетесь выполнить, вам нужно будет добавить javascript в ваш метод .orderClicked, чтобы, например, сделать вызов ajax или что бы вы ни пытались выполнить.

Answer 3

Попробуйте так:

<div ng-app="myApp" ng-controller="myCtrl"> 
    <form> 
     <input type="submit" ng-disabled="orderButtonClicked" ng-click="orderClicked()"> 
    </form> 
</div> 

<script> 
    var app = angular.module('myApp', []); 
    app.controller('myCtrl', function($scope) { 
    $scope.orderButtonClicked = false; 

    $scope.orderClicked = function() { 
     $scope.orderButtonClicked = true; 
    } 
}); 
</script> 

Answer 4

я ставлю точку останова там и посмотреть, если orderButtonClicked установлено значение истинно, когда orderClicked() срабатывает. Еще одна мысль: у меня есть опыт работы с этой проблемой до того, когда у меня есть ng-if где-то внутри области контроллера в html. Это связано с тем, что угловой создает новую область внутри этого ng-if dom. Лучший способ избежать этого - использовать controllerAs, а затем получить доступ к свойству scope с помощью имя_контроляName.propertyName.