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

hafeez · Accepted Answer · 2016-07-18 13:53:38Z

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>

Community · Accepted Answer · 2017-05-23 11:52:52Z

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, 2017 at 11:52

CommunityBot

11 silver badge

answered Jul 18, 2016 at 13:46

nitzanerman

1041 silver badge6 bronze badges

1 Comment

Anna Smother Over a year ago

That does not give the desired results with angular v1.57. The selected tag is still $valid, according to angularjs.

Anna Smother · Accepted Answer · 2016-07-18 15:05:11Z

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, 2016 at 15:05

Anna Smother

3302 gold badges4 silver badges14 bronze badges

Comments

Alok · Accepted Answer · 2016-07-18 21:48:45Z

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>

Collectives™ on Stack Overflow

angularjs select drop down validation

4 Answers 4

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Linked

Related