Dhaval Marthak Dhaval Marthak - 2 years ago 194
AngularJS Question

AngularJS Dropdown required validation

Following is my code snippet. I want to validate my dropdown using angular.

<td align="left" width="52%">
<span class="requiredSmall">*</span>
<select class="Sitedropdown" style="width: 220px;"
ng-options="service.ServiceID as service.ServiceName for service in services">
<option value="" ng-selected="selected">Select Service</option>

Valid means:

Valid values can be anything but "Select Service", it is my default value. Like other ASP.net Require field validator DefaultValue="0" for dropdown, so here My dropdown will be bound from the services and I want to select all other values except "Select Service".

Answer Source

You need to add a 'name' attribute to your dropdown list, then you need to add a required attribute, and then you can reference the error using myForm.[input name].$error.required:


<form name="myForm" ng-controller="Ctrl">

  <select name="service_id" class="Sitedropdown" style="width: 220px;"          
          ng-options="service.ServiceID as service.ServiceName for service in services"
    <option value="">Select Service</option> 
  <span ng-show="myForm.service_id.$error.required">Select service</span>



function Ctrl($scope) {
  $scope.services = [
    {ServiceID: 1, ServiceName: 'Service1'},
    {ServiceID: 2, ServiceName: 'Service2'},
    {ServiceID: 3, ServiceName: 'Service3'}

Here's a working plunker.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download