Modal nur schließen, wenn alle Eingabefelder eingegeben werden

Question

Ich habe dieses plunker, um mein Problem zu zeigen.

Sobald der Benutzer auf "Open Modal" klickt, öffnet sich ein Modal mit Eingabefeldern. Wenn der Benutzer alle 3 Eingabefelder eingibt, sollte er das Modal schließen. Das funktioniert gut.

Nun, wenn der Benutzer vergisst, eines der Felder zu erwähnen, gibt es eine Warnmeldung, die uns die Eingabe von Werten in die Felder anzeigt ... Nach dieser Nachricht sollte das Modal offen bleiben. in meinem Fall schließt es nach dem Anzeigen der Warnung.

Ich habe versucht, die Haut Funktion von hier

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

So anstelle der oben zu entfernen, habe ich versucht, diese

ng-click="adduser()" 

Dieses löst das Problem. d.h. es gibt eine Warnung, wenn eines der Felder fehlt. Aber das andere Problem kommt auf, das im ersten Szenario funktionierte. nachdem der Benutzer alle 3 Werte eingegeben und auf 'Hinzufügen' geklickt hat, schließt das Modal nicht. seit ich die Funktion hide() von ng-click entfernt habe.

Kann mir jemand sagen, wie man beide Fälle bekommen und arbeiten kann.

Answer 1

Sie können einfach hinzufügen Validierungen zu Ihrem Formular und dann können Sie die Taste deaktivieren, um zu verhindern Benutzer klicken Sie auf die Schaltfläche ohne füllen Sie alle Felder, wie folgt aus:

ng-disabled="form.$invalid" 

So können Sie so etwas wie dies in Ihrem modalen haben :

<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

Nun, wenn Sie Ihre modal ausblenden möchten, somethin g muss es auslösen. Ich bin mir nicht sicher, wie Sie es jetzt richtig von Ihrem Controller aus tun, Sie könnten jquery verwenden, um es in der addUser() - Methode zu verstecken.

Eine sauberere Lösung imo ist zu verwenden https://angular-ui.github.io/bootstrap/#/modal dann können Sie es programmgesteuert (und mehr) auf eine schönere Weise schließen.

Answer 3

Sie sollten Ihren Controller verwenden, um den Lebenszyklus des Modal zu verwalten. Ich habe eine neue Plunker erstellt, das zeigt, wie dies zu tun:

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'); 
    } 
}