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"
}];
});
Best Answer
Within your controller use $scope.Form = {};
then in your html+angular code do something like following