AngularJS：禁用提交和服务器响应之间的所有表单控件答案

【问题标题】：AngularJS: disabling all form controls between submit and server responseAngularJS：禁用提交和服务器响应之间的所有表单控件
【发布时间】：2017-07-28 21:04:13
【问题描述】：

如果我想在用户单击某种“保存”或“提交”按钮和通过网络传输的数据。我不想使用 JQuery（这是邪恶的！！！）并将所有元素查询为数组（按类或属性标记）到目前为止我的想法是：

使用cm-form-control 自定义指令标记所有元素，该指令将订阅2 个通知：“数据发送”和“数据处理”。然后自定义代码负责推送第二个通知或解决一个承诺。
使用promiseTracker（不幸的是！）会强制生成像ng-show="loadingTracker.active()" 这样的极其愚蠢的代码。显然，并非所有元素都有ng-disabled，我不想使用ng-hide/show 来避免“跳舞”按钮。
咬紧牙关，仍然使用 JQuery

有人有更好的主意吗？提前致谢！

更新： 字段集的想法确实有效。对于那些仍然想做同样事情的人来说，这是一个简单的小提琴http://jsfiddle.net/YoMan78/pnQFQ/13/

HTML：

<div ng-app="myApp">
    <ng-form ng-controller="myCtrl">
        Saving: {{isSaving}}
        <fieldset ng-disabled="isSaving">
            <input type="text" ng-model="btnVal"/>
            <input type="button" ng-model="btnVal" value="{{btnVal}}"/>
            <button ng-click="save()">Save Me Maybe</button>
        </fieldset>
    </ng-form>
</div>

和 JS：

var angModule = angular.module("myApp", []);

angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) {
    $scope.isSaving = undefined;
    $scope.btnVal = 'Yes';
    $scope.save = function()
    {
        $scope.isSaving = true;
        $timeout( function()
             {
                 $scope.isSaving = false;
                 alert( 'done');
             }, 10000);
    };
});

【问题讨论】：

您使用哪个服务来发送表单中的数据？ $http 还是 $resource？
它实际上是 $http，因为我不需要处理任何未完成的事情。
禁用的字段集在 IE 中不起作用，即不是解决方案。我使用 Bootstrap 模态并将背景设置为静态。
请注意，在撰写本文时 there is a bug 其中 fieldset 不能用作 flexbox 容器

标签： javascript forms angularjs submit

【解决方案1】：

将所有字段包装在 fieldset 中并像这样使用 ngDisabled 指令：

<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>

它将自动禁用字段集中的所有输入。

然后在控制器中将$scope.isSaving 设置为 http 调用之前的true 和之后的false。

【讨论】：

似乎即使使用
这是一个很好的提示，但不幸的是，IE 或 Safari 不支持字段集上的 disabled 属性 w3schools.com/tags/att_fieldset_disabled.asp
@kiwiaddo 在我的测试中它在 IE9+ 中运行良好。顺便说一句，w3schools.com 并不是最好的参考网站。最好检查这个页面developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
输入类型按钮、文本和文件未在 IE11 中禁用 :-(，按钮也显示为灰色，但角度 ng-click-handler 仍会触发。
@im1dermike 你说得对，它确实在 IE 中不起作用。该字段在视觉上被设置为禁用，但用户仍然可以与其交互并对其进行编辑，就好像它已启用一样。 IE 中存在一个已经提交的错误，它已修复，但尚未发布。它将在下一个 IE 主要版本中提供connect.microsoft.com/IE/feedbackdetail/view/962368/…

【解决方案2】：

现代浏览器中有一个简单的解决方案：

定义一个 CSS 类

.disabled {
  pointer-events: none;
  ... ...
}

将此类添加到ng-form

<ng-form data-ng-class="{ 'disabled': isSaving }"> ... inputs ... </ng-form>

Here 是 pointer-events 支持图表。

注意：即使您设置了pointer-events: none，您仍然可以使用键盘 Tab 键输入元素。

【讨论】：