모달 닫기 모든 입력 필드가 입력 된 경우에만

Question

내 문제를 표시하려면이 plunker이 있어야합니다.

사용자가 "Open Modal"을 클릭하면 모달이 열리고 입력 필드가 표시됩니다. 사용자가 3 개의 입력 필드를 모두 입력하면 모달을 닫아야합니다. 이것은 잘 작동합니다.

사용자가 필드 중 하나라도 언급하지 않으면 필드에 값을 입력하라는 경고 메시지가 나타납니다.이 메시지 뒤에는 모달이 열려 있어야합니다. 제 경우에는 경보를 보여 주면서 닫힙니다.

내가 여기

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

그래서 대신 위의 숨기기 기능을 제거하려고, 난이

ng-click="adduser()" 

이 문제를 해결했습니다. 즉, 필드 중 하나가 누락되면 경고를 보냅니다. 그러나 첫 번째 시나리오에서 작업하고 있던 다른 문제가 발생합니다. 사용자가 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

글쎄, 당신이 당신의 모달을 숨기려면, 뭔가 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을 만들었습니다