Question

我在使用AngularJS在Bootstrap模式中提交表单时遇到了一些麻烦。用户当前能够在模态解除之前将提交按钮混合几次并且每次都调用提交功能。这显然不是理想的行为。

所以我尝试将data-ng-disabled添加到按钮，并在单击提交按钮时禁用它。这工作正常，用户不能提交多次。但是现在即使使用按钮data-dismiss="modal"，模态也不会关闭。我已经阅读过关于AngularUI Bootstrap的内容，但是如果有办法解决这个问题而不改变我的模态会很棒。

模态中提交按钮的剪切器：

<div class="modal-footer">
     <button class="btn btn-primary" data-dismiss="modal" data-ng-disabled="isDisabled" ng-click="disableButton(); submit()">Submit</button>
     <button class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>

disableButton()功能：

$scope.disableButton = function(){
     $scope.isDisabled = true;
}

Answer 1

您需要使用表单的名称并将其用于ng-disabled，然后使用$ invalid输入状态验证，请参阅以下内容：

 <button type="button" class="btn btn-primary" ng-disabled="myForm.$invalid" ng-click="submit()">Submit</button>
 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

使用Bootstrap模式提交AngularJS表单

1 个答案: