すべての入力フィールドが入力されている場合のみモーダルを閉じます

Question

私はこの問題を示すためにplunkerを持っています。

ユーザーが「Open Modal」をクリックすると、入力フィールドを示すモーダルが開きます。ユーザーが3つの入力フィールドをすべて入力すると、モーダルが閉じます。これは正常に動作します。

ユーザーがフィールドのいずれかを言い表すのを忘れた場合、フィールドに値を入力するよう警告メッセージが表示されます。このメッセージの後、モーダルは開いたままにしてください。私の場合は、警告を表示した後に閉じます。

は、私がここに

ng-click="$hide();adduser()" 

ので、代わりの上から非表示機能を削除しようとした、私はこれは

ng-click="adduser()" 

これは、問題を解決してみました。すなわち、フィールドの1つが欠落しているときに警告を出す。しかし、最初のシナリオで働いていたもう一つの問題が出てくる。 ユーザーが3つの値をすべて入力してから、「追加」をクリックするとモーダルは終了しません。 ng-clickからhide（）機能を削除したので

誰かがケースの両方を可能にして作業する方法を教えてもらえますか？

Answer 1

あなたは、単にあなたのフォームに検証を追加することができ、その後、あなたはこのようなすべてのフィールドを、記入せずにボタンをユーザーがクリックを防止するためのボタンを無効にすることができます

ng-disabled="form.$invalid" 

つまり、あなたのモーダルにこのような何かを持つことができます：

<div class="modal ng-scope center am-fade-and-scale" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1050; display: block;"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header" ng-show="title"> 
     <button type="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" ng-bind-html="title"></h4></div> 
     <div class="modal-body"> 
     <form novalidate name="form"> 
      <div class="form-group"> 
      Select Sedol: 
      <input name="select1" type="text" ng-model="selectedState" bs-options="state for state in states" placeholder="Enter state" ng-change="get_change(selectedState)" bs-typeahead required> 
      </div> 
      <div class="form-group"> 
      RestrName:&nbsp;&nbsp; 
      <select name="select2" id="restrName" ng-model="selectedOption" ng-change="set_value(selectedOption)" required> 
       <option value="sedol">sedol</option> 
       <option value="cusip">cusip</option> 
      </select> 
      </div> 

      <div class="form-group"> 
      RestrType:&nbsp;&nbsp; 
      <select name="select3" id="restrType" ng-model="selectedOption1" ng-change="set_value1(selectedOption1)" required> 
       <option value="NoBuy">NoBuy</option> 
       <option value="NoSell">NoSell</option> 
       <option value="NoHold">NoHold</option> 
       <option value="NoTrade">NoTrade</option> 
       <option value="NoincExp">NoincExp</option> 
       <option value="NoDecExp">NoDecExp</option> 
       <option value="NoHoldLong">NoHoldLong</option> 
       <option value="NoHoldShort">NoHoldShort</option> 
       <option value="NoCoverBuy">NoCoverBuy</option> 
       <option value="NoSellShort">NoSellShort</option> 
      </select> 
      </div> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" ng-disabled="form.$invalid" ng-click="$hide();adduser()">Add</button> 
     </div> 
    </div> 
    </div> 
</div> 

DEMO

Answer 2

さて、あなたはあなたのモーダルを非表示にする場合、のsomethin gはそれを引き起こさなければならない。私は今あなたのコントローラから適切に行う方法がわからないので、jQueryを使用してaddUser（）メソッドの内側から隠すことができます。

クリーナーソリューションimoはhttps://angular-ui.github.io/bootstrap/#/modal を使用していますが、プログラムでそれをより良い方法で閉じることができます。

Answer 3

モーダルのライフサイクルを管理するには、コントローラを使用する必要があります。

http://plnkr.co/edit/k0yDjAcUbRhUtm1vQ2Ck?p=preview

$scope.detailsModal = $modal({ 
    scope: $scope, 
    title: 'Enter details', 
    html: true, 
    show: false, 
    templateUrl: 'modal/docs/modal.demo.tpl.html' 
    }); 

    $scope.showModal = function() { 
    $scope.detailsModal.show(); 
    } 

    $scope.adduser = function() { 
    if ($scope.selectedState && $scope.selectedOption && $scope.selectedOption1) { 
     $scope.detailsModal.hide(); 
    } 
    else { 
     window.alert('please select all required fields'); 
    } 
} 

：私はあなたがこれを行う方法を示して新しいplunkerを作成しました