仅在输入所有输入字段时关闭模式

Question

I have this plunker to show my issue.

Once user clicks on "Open Modal" a modal opens up showing input fields. If user enters on all the 3 input fields, it should close the modal. This works fine.

Now, if user forgets to mention any one of the field, it gives a alert message showing us to enter values to the fields... After this message, the modal should remain open. in my case, it closes after showing the alert.

I tried to remove the hide function from here

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

So instead of the above, i tried this

ng-click="adduser()"

This solves the problem. ie it gives an alert when one of the fields are missing. But the other issue comes up which was working in the first scenario. after user enters all the 3 values and clicks 'add' the modal doesnt close. since i have removed hide() functionality from ng-click.

Can someone tell me how to get both the cases possible and working.

Answer 1

You can simply add validations to your form and then you can disable the button to prevent user click on button without fill all fields, like this:

ng-disabled="form.$invalid"

So you can have something like this in your modal:

<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

Well, if you want to hide your modal, something has to trigger it. I'm not sure how to do it properly from your controller right now, you could use jquery to hide it from inside addUser() method.

A cleaner solution imo is to use https://angular-ui.github.io/bootstrap/#/modal then you can programmatically close it (and more) in a nicer way.

Answer 3

You should be using your controller to manage the lifecycle of the modal. I have created a new plunker that shows you how to do this:

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