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

javascript angularjs forms submit

2022-08-30 04:55:46

如果我想在用户单击“保存”或“提交”按钮和通过网络传输的数据的一段时间内禁用表单控件（或至少使它们不可用于用户交互），那么对于什么是最佳（和正确）方法的困境。我不想使用JQuery（这是邪恶的!!!）并将所有元素查询为数组（按类或属性标记）到目前为止，我的想法是：

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

有没有人有更好的想法？提前致谢！

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

网页：

<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);
    };
});

答案 1

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

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

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

然后在控制器中设置为 http 调用之前和之后。$scope.isSavingtruefalse

答案 2

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

定义一个 css 类

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

将此类添加到ng-form

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

下面是指针事件支持图表。

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