angularjs select drop down validation
Question
Angular v1.57:
Got a question, when I fill my select drop down I want to validate it. It should be required AND an item should be selected. When I get some data in my model and it's not good, the drop-down should not have selected anything. This works, out of the box, but it should make my select drop-down field $invalid in order to draw a simple red border around it (with css). All my input fields has the same construction.
As you can see, I have tried it with the plnkr, below, but no luck. The select drop-down field stays valid, even when nothing is selected, but my model ($scope.data.selector) has a "falsy" value.
$scope.data = {
selector: 3
}
When I change the model to a valid value, eg:
$scope.data = {
selector: 2
}
I can see the value that is selected in the drop-down. But when there is a "falsy" value, the select drop-down should be $invalid. How can I achieve this (it should act like the input field when there is no value).
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"
}];
});
4 answers
solution1
2 2016-07-18 13:53:38
Within your controller use $scope.Form = {};
then in your html+angular code do something like following
<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>
solution2
1 2016-07-18 13:46:50
you can add this
<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>
see this for more information
solution3
1 2016-07-18 13:47:41
There is no particular way of validating drop downs where you don't have default texts. I have resorted to adding this to the select 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>
solution4
1 ACCPTED 2016-07-18 15:05:11
Well the thing that gave me a desired result, was to look (in the controller) if the value is in the option list, if it is nothing happens to the model, if not make that part of the model undefined.
Not perfect, but it works.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.