驗證使用角度引導模態窗口按鈕點擊輸入字段

我想驗證使用angularjs框架模式窗口上提交/確定按鈕點擊輸入字段。我所嘗試的是在我的輸入按鈕上添加required/ng-required所需的屬性。但在我的確定按鈕上單擊輸入文本字段未驗證，模式窗口被解除。以下是我的模態身體。我希望看到單擊確定後顯示其周圍紅色邊框的角度行爲。驗證使用角度引導模態窗口按鈕點擊輸入字段

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

有沒有額外的東西我需要在我的事件處理程序提交按鈕做？下面是我爲這個演示創建的一個潛水員。任何幫助將不勝感激。 http://plnkr.co/edit/ACoTQgIVnWnR92LngT89?p=preview 順便說一句，運行只能在Firefox中運行。

來源

2015-10-04 slacker

首先，您需要使用正確的元素和相應的類名。您需要將輸入包裝到div中，並且類名稱爲form-group，並且需要將其包裝爲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

現在，這是一個正確的引導的形式，你可以添加角度驗證。這是非常簡單的只是通過給表單和輸入一個名稱屬性：

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

現在的角度會在後臺瓶坯驗證。它會將modalForm添加到您的模態控制器的範圍中，您可以從中獲取表單的狀態以及它的輸入元素。

現在由於required屬性，輸入和表單被認爲是無效的，可以使用以下方法進行檢查：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類是彩色的消息。添加span元素與help-block類，並使用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指令：

我建議你閱讀的引導形式以前的鏈接和使用的角度的形式以下指南。它具有很好的例子：

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中正確使用驗證的好主意。希望它有幫助，祝你好運。

來源

2015-10-04 14:35:07 iH8

以下是主要方向得到你想要的東西：

包裝你在<form>input元素。
在ok()功能，關閉模式，如果它只是有效

我也換成type="text"與type="number"，因爲你希望用戶輸入一個數字。還糾正了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>

見forked plunker

來源

2015-10-04 14:17:25

驗證使用角度引導模態窗口按鈕點擊輸入字段

回答

相關問題