使用angular驗證bootstrap模態窗口按鈕單擊時的輸入字段

Question

我正在嘗試使用angularjs框架驗證提交/確定按鈕上的輸入字段在模式窗口中單擊。 我試過的是在輸入按鈕上添加所需的屬性/ ng-required。 但是在我的ok按鈕上單擊輸入文本字段未經過驗證，模式窗口被取消。 以下是我的模態體。 我希望看到點擊ok時顯示紅色邊框的角度行為。

<div class="modal-body"> 
      <input type="text" class="input-box" size="10" required ng-model="data.myNumber"/>
</div>

在我的提交按鈕的事件處理程序中，我還需要做些什么嗎？ 下面是我為演示創建的一個plunker。 任何幫助將受到高度贊賞。 http://plnkr.co/edit/ACoTQgIVnWnR92LngT89?p=preview順便說一下，plunker只能在firefox中運行。

Answer 1

以下是獲得您想要的主要方向：

• 將input包裝在<form>元素中。
• 在ok()函數中，只有在它有效時才關閉模態

我還用type="number"替換了type="text" ，因為你希望用戶輸入一個數字。 還修正了plunker使它工作：

ModalInstanceController

app.controller('ModalInstanceCtrl', function($scope, $modalInstance){
  $scope.ok = function () {
    if ($scope.numberForm.$valid) {
      $modalInstance.close();
    }
  };
  // ...
}

HTML

<form name="numberForm">
    <div class="form-group">
        <input type="number" class="form-control input-box" required ng-model="data.myNumber"/>
    </div>
    <button class="btn btn-primary" ng-click="ok()" >OK</button>
    <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</form>

見plunker

---

改進： 如果輸入無效，則使用角度驗證來添加紅色邊框 ：

<form name="numberForm">
    <div class="form-group" ng-class="{ 'has-error' : numberForm.myNum.$invalid }">
        <input type="number" name="myNum" class="form-control input-box" required ng-model="data.myNumber"/>
    </div>
    <button class="btn btn-primary" ng-click="ok()" ng-disabled="numberForm.$invalid">OK</button>
    <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</form>

見分叉的plunker

Answer 2

首先，您需要使用正確的元素和相應的類名。 您需要將輸入包裝在帶有classname form-group的div ，並且需要將其包裝到form元素中。 實際input需要具有form-control類：

<form>
  <div class="form-group">
    <input type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
  </div>
</form>

可以在這里找到關於正確使用帶引導程序的表單的精彩讀物：

http://getbootstrap.com/css/#forms

現在它是一個正確的引導程序表單，您可以添加角度驗證。 通過為表單和輸入提供name屬性，這非常簡單：

<form name="modalForm">
  <div class="form-group">
    <input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
  </div>
</form>

現在angular將在后台執行驗證。 它會將modalForm添加到modalForm的范圍，從中可以獲取表單的狀態和輸入元素。

現在由於required屬性，輸入和表單被認為是無效的，可以通過使用： modalForm.modalInput.$invalid來檢查modalForm.modalInput.$invalid當輸入為空時，它將返回true。 您可以使用它將has-error類添加到form-group div元素，該元素將輸入元素的邊框變為紅色。 您可以使用ng-class指令動態添加此類：

  <div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
    <input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
  </div>
</form>

您還可以添加一條消息，該消息也將通過has-error類進行着色。 使用help-block類添加span元素，並使用ng-show指令根據所需錯誤切換它：

  <div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
    <input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
    <span ng-show="modalForm.modalInput.$error.required" class="help-block">Input is required.</span>
  </div>
</form>

現在，如果您希望在表單無效時無法按下ok按鈕，則可以切換disabled類和/或添加使用ng-disabled指令：

<button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">OK</button>

我建議閱讀bootstrap表單上的上一個鏈接以及使用angular表格的以下指南。 它有很好的例子：

https://docs.angularjs.org/guide/forms

這是關於Plunker的完整模態代碼和工作示例：

<div class="modal-content">
  <div class="modal-header">
      <h3 class="modal-title">My Modal</h3>
  </div>
  <form name="modalForm">
    <div class="modal-body">
      <div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
        <input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
        <span ng-show="modalForm.modalInput.$error.required" class="help-block">Input is required.</span>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">OK</button>
      <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
    </div>
  </form>
</div>

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

PS：我知道它沒有回答你關於如何在按鈕點擊上預先形成輸入驗證的問題，但這是因為它不是使用表單的“角度方式”。 以上和我提供的鏈接應該讓您了解如何在Angular中正確使用驗證。 希望它有所幫助，祝你好運。