CODEWITHSUNDEEP
validationangularjshtml-select
user3174936
user3174936

Reputation: 41

Angular dropdown/select required always says it is valid

So I have a dropdown and I am using angular to build it. Minutes is an array of numbers [0,1,2....59]. The filter is a simple filter that displays the digits from 0-9 as 00, 01... etc.

 <select ng-model="addObj.StartMinute"
                            ng-options="m as m | pad2Digit for m in Minutes"
                            required
                            name="startMinute">
                            <option value="">-- select --</option>
                        </select>

My problem is that this ALWAYS reports being valid. I have removed the option in there that lets me customize the option used when no match is found, and that doesn't change it. I have tried setting StartMinute to null, -1 and undefined and still the select ALWAYS says it is valid.

I have found so far that the problem has to do with my using simple numbers rather than binding to objects. In cases where I am doing a dropdown with more a collection of objects, required validation is correctly detecting that nothing is chosen. I would have thought that setting the initial value on the above dropdown to null would work, but it isn't. So does anyone know how to use required validation on a dropdown that is bound to an array of numbers?

Upvotes: 1

Views: 5821

Answers (1)

user3174936
user3174936

Reputation: 41

There must be something else on the project where it wasn't working making this not work because the raw jsfiddle I threw together to try to demo the problem works properly. If the initial value is null, then the validation does fail like I would expect.

HTML

<div ng-app="app">
<div ng-controller="ctrlDropdown">
    <form name="testForm">
        <select ng-model="number1"
                ng-options="num for num in numbers"
                required
                name="ddl1">
                    <option value="">- select - </option>
        </select>
        <br/>failsValidation: {{testForm.ddl1.$error.required}}
        </form>
</div>
</div>

JS

var app = angular.module("app",[]);
app.controller("ctrlDropdown",function($scope){
    $scope.test = "wee";
    $scope.number1 = null;
    $scope.numbers=[1,2,3,4,5,6];
});

http://jsfiddle.net/NBhTT/

Upvotes: 3

Related Questions