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, e.g:
$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"
}];
});
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments