CODEWITHSUNDEEP
javascripthtmlangularjsdrop-down-menu
Anna Smother
Anna Smother

Reputation: 320

angularjs select drop down validation

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

Upvotes: 1

Views: 19533

Answers (4)

Alok
Alok

Reputation: 1310

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>

Upvotes: 1

Anna Smother
Anna Smother

Reputation: 320

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.

Upvotes: 1

hafeez
hafeez

Reputation: 21

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>

Upvotes: 2

nitzanerman
nitzanerman

Reputation: 104

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

Upvotes: 1

Related Questions