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

122

如果在用户单击某种“保存”或“提交”按钮期间要禁用表单控件（或至少使其无法与用户交互），我对最好（正确）的方法有什么困惑？和数据通过网络传输。我不想使用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);
    };
});

— 优曼78
source

您正在使用哪种服务从表单发送数据？$ http或$ resource？

— 弗朗索瓦·罗曼

它实际上是$ http，因为我不需要处理任何未完成的事情。

— YoMan78

禁用的字段集不适用于IE，即不是解决方案。我使用Bootstrap模式，并将背景设置为静态。

— im1dermike

请注意，在写作时有一个错误在那里fieldset不能用作Flexbox的容器

— 乔治·莫尔

Answers:

283

将所有字段包装在fieldset中，并使用ngDisabled指令，如下所示：

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

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

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

— 亚历山大·普赫科夫（Alexander Puchkov）
source

似乎即使使用<button>也确实可以正常工作！非常感谢Sasha。

— YoMan78

这是一个很好的提示，尽管很遗憾，IE或Safari不支持字段集的disable属性w3schools.com/tags/att_fieldset_disabled.asp

— kiwiaddo 2014年

@kiwiaddo在我的测试中，它在IE9 +中运行良好。对了，w3schools.com并不是最好的参考网站。最好查看此页面developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

— Alexander Puchkov 2014年

输入类型按钮，文本和文件不是在IE11禁用:-(，还按钮是灰色的，但角度NG-点击处理程序仍是起火。

— 塞巴斯蒂安

@ im1dermike你说的对，它确实在IE中不起作用。该字段的外观样式为已禁用，但是用户仍可以与其交互并像启用该字段一样对其进行编辑。IE中有一个已提交的错误，该错误已修复，但尚未发布。这将是在未来的IE主要版本可用connect.microsoft.com/IE/feedbackdetail/view/962368/...

— 亚历山大Puchkov

-5

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

定义一个CSS类

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

将该类添加到 ng-form

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

这是指针事件支持表。

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

— 劳
source