表单提交后禁用按钮答案

【问题标题】：Disable button after form submit表单提交后禁用按钮
【发布时间】：2016-03-07 04:34:27
【问题描述】：

听起来很简单，也是一个众所周知的问题，对吧？我也是这么想的。我如何在 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 回答也是如此，他声称它正在工作，但对我来说是不行的。

您可以假设角度设置正确，禁用按钮工作正常。

【问题讨论】：

一般来说，我发现最好的方法是在点击时隐藏提交按钮，而不是删除或禁用它——不管是什么 js 库或我正在使用的服务器后端。然后，我将其替换为看起来像禁用的提交按钮、进度条或任何适合手头任务的东西。
感谢 Dave，虽然看到按钮在单击时消失并不好，但它确实适用于 ng-hide。
好吧，它不必消失，至少就用户所知而言，它不必消失 - 请参阅我的答案。
是的..我们只是提交了相同的答案

标签： html angularjs asp.net-mvc

【解决方案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>

请记住，即使在这种情况下，用户也可以通过在文本框中按 Enter 来重新提交。

【讨论】：

【解决方案2】：

试试这个方法：

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

【讨论】：

你的意思是切换表单和div，对吧？完成了，没有工作
这很奇怪不起作用..也许其他一些脚本正在干扰这种行为，尝试将我的代码放在一些简单的 html 页面中，就像一个魅力！

【解决方案3】：

我将在此处设置一个断点，看看当 orderClicked() 被触发时 orderButtonClicked 是否设置为 true。只是另一个想法，当我在 html 的控制器范围内的某个地方有一个 ng-if 之前，我有过这个问题的经验。这是因为 angular 似乎在该 ng-if dom 中创建了一个新范围。避免这种情况的最佳方法是使用 controllerAs，然后使用 controllerName.propertyName 访问范围属性。

【讨论】：

嗨，我可以在上面设置一个断点，或者只是打印一个控制台，以太方式我 100% 确定它是正确的并且我的按钮被禁用。控制器As.. 是的，我的其他页面中有这个，你说服我也切换这个页面，不幸的是，它并没有解决问题。
尝试将其放入 $timeout() 中。看看强制另一个摘要循环是否会更新 dom。

【解决方案4】：

如果您不禁用或删除按钮，表单是否会提交？ angular documentation 声明：“因此，Angular 会阻止默认操作（向服务器提交表单），除非 <form> 元素指定了 action 属性。”
因此，例如，根据您要完成的任务，您必须在 .orderClicked 方法中添加 javascript 以进行 ajax 调用，或者您要完成的任何任务。

【讨论】：

是的，如果我取出ng-disabled 属性，表单就会提交。我想要完成的是在提交表单时禁用按钮，这样就不会执行重复的表单提交。