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

Question

我有这个plunker 来显示我的问题。

一旦用户点击“打开模式”，就会打开一个显示输入字段的模式。如果用户在所有 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

好吧，如果你想隐藏你的模态，就必须触发它。我现在不确定如何从您的控制器正确执行此操作，您可以使用 jquery 将其隐藏在 addUser() 方法中。

imo 更清洁的解决方案是使用https://angular-ui.github.io/bootstrap/#/modal 然后您可以以更好的方式以编程方式关闭它（以及更多）。

Answer 3

您应该使用控制器来管理模式的生命周期。我创建了一个新的 plunker，向您展示如何执行此操作：

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