Question

我使用角度来创建一个模态窗口。在模态窗口中有一个带有提交按钮和关闭按钮的表单。

如果我填写表格并提交，然后点击关闭按钮，表格将再次提交。如果我没有填写表单，只需单击关闭按钮，模式窗口将被关闭，表单正在提交。

关于如何在关闭窗口时阻止表单提交的任何想法？

这是我的控制器，我有打开模态窗口的方法：

mainApp2.controller("mainAppController", ["$scope", "$aside", "$document", function ($scope, $aside) {
var asideInstance;
$scope.openSidebar = function () {
    asideInstance = $aside.open({
        templateUrl: "/Apps/Modules/ModuleConfigForm/templates/moduleConfigformTemplate.html",
        controller: "moduleConfigformController",
        placement: "left",
        size: "sm",
        backdrop: true
    });
}
}])

这是我的comtroller，具有关闭逻辑

mainApp2.controller("moduleConfigformController",
function moduleConfigformController($scope, $http, moduleConfigformService, $uibModalInstance, $filter) {
    $scope.close = function (e) {
        $uibModalInstance.dismiss();
        e.stopPropagation();
    };
....
}

这是我的表格：

<form name="configForm" ng-submit="submitConfigForm()">
        <button ng-disabled: ng-disabled="configForm.$invalid" tabindex="100" class="btn btn-success pull-left" type="submit" ng-class="{'btn-primary':configForm.$valid}">Start</button>
        <button class="btn btn-warning pull-right" ng-click="close()">Close window</button>
</form>

Answer 1

使用没有type属性的按钮时要小心，因为浏览器会将它们视为表单的默认提交按钮。

尝试将type属性添加到button

 <button type="button" class="btn btn-warning pull-right" ng-click="close()">Close window</button>

角形旁边模态窗口与形式。当我取消\关闭窗口时，表单正在提交

1 个答案: