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, 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"
  }];
});

score 2 · Answer 1 · answered Jul 18 '16 at 13:53

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>

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

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

edited May 23 '17 at 11:52

Community

1
1

answered Jul 18 '16 at 13:46

nitzanerman

104
1
6

That does not give the desired results with angular v1.57. The selected tag is still $valid, according to angularjs. – Anna Smother Jul 18 '16 at 14:33

Alok · Answer 3 · 2016-07-18T21:48:45.240

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>

score 1 · Accepted Answer · answered Jul 18 '16 at 15:05

1

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.

answered Jul 18 '16 at 15:05

Anna Smother

322
2
4
14

angularjs select drop down validation

4 Answers4