$ uibModal尝试强制执行在我的表单中提交

我有一个模式对话框，使用ui.bootstrap创建。当我使用$uibModal或$uibModalInstance执行一些代码时，在此模式的控制器内部，AngularJS尝试从对话框中调用我的<form>的提交方法。另外，我的<form>还没有submit属性，但它具有ng-submit属性。

这里是我的模态对话框的一部分：

<div class="modal-content"> 
    <form name="newActionForm" class="form-horizontal" role="form" ng-submit=""> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
      <h4 class="modal-title">{{ 'action.labelNewAction' | translate }}</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="form-group"> 
       <label class="col-sm-3 control-label site-form-label">{{ 'common.labelName' | translate }}:</label> 
       <div class="col-sm-9 input-group padding_right_left_15" ng-class=" newActionForm.name.$valid ? 'has-success' : 'has-error' "> 
        <input required ng-maxlength="160" ng-change="vm.test()" name="name" class="form-control" ng-model="vm.newAction.name"/> 
        <span class="input-group-addon"> 
         <i class="glyphicon glyphicon-remove" ng-show="newActionForm.name.$error.required" tooltip="{{'formValidationRequired' | translate}}"></i> 
         <i class="glyphicon glyphicon-remove" ng-show="newActionForm.name.$error.maxlength" tooltip="{{'formValidationNameTooLong' | translate}}"></i> 
         <i class="glyphicon glyphicon-ok" ng-show="newActionForm.name.$valid"></i> 
        </span> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button ng-disabled="newActionForm.$invalid" class="btn btn_kassir" ng-click="vm.addAction()">{{ 'common.labelButtonAdd' | translate }}</button> 
      <button class="btn btn-default" ng-click="close()">{{ 'common.labelButtonClose' | translate }}</button> 
     </div> 
    </form> 
</div>

和模态位指示有两个功能，即试图执行请跟随我的形式：

angular 
     .module('newActionDialog') 
     .controller('NewActionDialogController', 
      [ '$scope', '$stateParams', '$uibModalInstance', 'Requester', '$uibModal', '$filter', '$translate', 'alertService', NewActionDialogController]); 

    function NewActionDialogController($scope, $stateParams, $uibModalInstance, Requester, $uibModal, $filter, $translate, alertService) { 
     var vm = this; 

     vm.showSelectHall=function(){ 
      $uibModal.open({ 
       templateUrl: 'app/repertoire/listHalls.html', 
       controller: function ($scope, $uibModalInstance) { 
        this.select = function (hallConfig) { 
         $uibModalInstance.close(hallConfig); 
        }; 
       }, 
       controllerAs: 'ctrl', 
      }).result.then(function (hallConfig) { 
       vm.newAction.defaultHallConfiguration=hallConfig; 
      }); 
     }; 

     ......  

     vm.close=function(){ 
      $uibModalInstance.close(); 
     } 
    }

来源

2016-02-15 Ivan Timoshin

您必须在模态范围内创建提交函数，将函数赋值为ng-submit =“someFunction（）”，那么它将起作用 – Ahmer

@Ahmer我的问题不是我无法执行提交操作，而是角尝试执行提交没有我的命令。 –

得到它创建一个隐藏输入标签类型提交它将提交您的表单，当你按下输入 – Ahmer

的问题已经解决，它发生的原因是$uibModal.open()方法默认创建了一个模式，其中<buttons type="submit">。所以，$uibModal.open()<button>转换为<button type="submit>。解决方案是添加到所有按钮type="button"，当然除了真正的提交按钮。

来源

2016-02-15 12:32:33

图例，谢谢！ – ncbl

节省了我的时间！谢谢 –

$ uibModal尝试强制执行在我的表单中提交

回答

相关问题