$ 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嘗試強制執行在我的表單中提交

回答

相關問題