angularjs選擇下拉驗證

Angular v1.57：angularjs選擇下拉驗證

有一個問題，當我填充我的選擇下拉列表我想驗證它。應該要求並且應該選擇一個項目。當我在我的模型中獲取一些數據並且它不好時，下拉列表不應選擇任何內容。這種方式是開箱即用的，但它應該使我的選擇下拉字段$無效，以便在其周圍繪製簡單的紅色邊框（使用CSS）。我所有的輸入字段都有相同的結構。你可以看到，我已經用下面的plnkr嘗試過了，但沒有運氣。選擇下拉字段保持有效，即使沒有選擇任何內容，但我的模型（$ scope.data.selector）具有「falsy」值。

$scope.data = { 
    selector: 3 
}

當我改變模型爲有效的值，e.g：

$scope.data = { 
    selector: 2 
}

我可以看到，在下拉列表中選擇的值。但是當出現「虛假」值時，選擇下拉應該是$無效的。我該如何做到這一點（當沒有值時，它應該像輸入字段一樣）。

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

<body ng-app="myApp" ng-controller="MyController"> 
    <form name="testForm" novalidate=""> 
    <label>Select a number</label> 
    <div ng-class="{'has-error': testForm.testList.$invalid}"> 
     <select class="form-control" name="testList" ng-model="data.selector" ng-options="item.value as item.label for item in list" required></select> 
    </div> 

    <label>Input something</label> 
    <div ng-class="{'has-error': testForm.testInput.$invalid}"> 
     <input class="form-control" name="testInput" type="text" ng-model="data.inputor" required /> 
    </div> 
    </form> 
</body>

var myApp = angular.module("myApp", []); 

myApp.controller("MyController", function($scope) { 
    $scope.data = { 
    selector: 3, 
    inputor: "" 
    } 
    $scope.list = [{ 
    value: 1, 
    label: "One" 
    }, { 
    value: 2, 
    label: "Two" 
    }]; 
});

來源

2016-07-18 Anna Smother

嗯，這給了我希望的結果件事，就是看（控制器），如果該值在選項列表，如果它沒有發生任何事情的模型，如果不使模型的那部分未定義。

不完美，但它的工作原理。

來源

2016-07-18 15:05:11

您可以添加此

<select class="form-control" name="testList" ng-model="item.value" ng-options="item.value as item.label for item in list" required> 
     <option style="display:none" value=""></option> 
    </select>

看到this以獲取更多信息

來源

2016-07-18 13:46:50 nitzanerman

這不會給角度v1.57所需的結果。根據angularjs，所選標籤仍然是有效的。 –

有驗證的下拉菜單，你不要」沒有特別的辦法沒有默認文本。我已經採取了將此添加到選擇div。

ng-class="{'has-error': testForm.testList.$invalid 
    || (testForm.testList.$touched && testForm.testList.$pristine)}"

var myApp = angular.module("myApp", []); 
 

 
myApp.controller("MyController", function ($scope) { 
 
    $scope.data = { 
 
    selector: 3, 
 
    inputor: "" 
 
    } 
 
    $scope.list = [ 
 
    { 
 
     value: 1, 
 
     label: "One" 
 
    }, 
 
    { 
 
     value: 2, 
 
     label: "Two" 
 
    } 
 
    ]; 
 
});

.has-error{ 
 
    border: 1px solid red; 
 
    }

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="MyController"> 
 
    <form name="testForm" novalidate=""> 
 
     <label for='testList'>Select a number</label> 
 
     <div ng-class="{'has-error': testForm.testList.$invalid 
 
     || (testForm.testList.$touched && testForm.testList.$pristine)}"> 
 
     <select class="form-control" id='testList' name="testList" ng-model="data.selector" ng-options="item.value as item.label for item in list" required ng-class=''></select> 
 
     </div> 
 
     <label>Input something</label> 
 
     <div ng-class="{'has-error': testForm.testInput.$invalid}"> 
 
     <input class="form-control" name="testInput" type="text" ng-model="data.inputor" required /> 
 
     </div> 
 
    </form> 
 
    </body>

來源

2016-07-18 13:47:41 Alok

在控制器中使用 $ scope.Form = {};

然後在你的HTML +角碼做類似以下

<form name="Form.testForm" role="form" novalidate> 
<label>Select a number</label> 
<div ng-class="{'has-error': Form.testForm.testList.$invalid}"> 
    <select class="form-control" name="testList" ng-model="data.selector" ng-options="item.value as item.label for item in list" required> 
     <option value="">select a value<option> 
    </select> 
    <p ng-if="Form.testForm.testList.$invalid && !Form.testForm.testList.$pristine" class="help-block text-red">field is required.</p> 
</div>

來源

2016-07-18 13:53:38 hafeez

angularjs選擇下拉驗證

回答

相關問題