javascriptasp.netangularjsangularjs-validation

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-model="selectedSpecimen().serviceID" 
            ng-options="service.ServiceID as service.ServiceName for service in services"> 
         <option value="" ng-selected="selected">Select Service</option> 
   </select> 
</td>

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".


Solution

  • 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:

    HTML:

            <form name="myForm" ng-controller="Ctrl" ng-submit="save(myForm)" novalidate>
            <input type="text" name="txtServiceName" ng-model="ServiceName" required>
    <span ng-show="myForm.txtServiceName.$error.required">Enter Service Name</span>
    <br/>
              <select name="service_id" class="Sitedropdown" style="width: 220px;"          
                      ng-model="ServiceID" 
                      ng-options="service.ServiceID as service.ServiceName for service in services"
                      required> 
                <option value="">Select Service</option> 
              </select> 
              <span ng-show="myForm.service_id.$error.required">Select service</span>
    
            </form>
    
        Controller:
    
            function Ctrl($scope) {
              $scope.services = [
                {ServiceID: 1, ServiceName: 'Service1'},
                {ServiceID: 2, ServiceName: 'Service2'},
                {ServiceID: 3, ServiceName: 'Service3'}
              ];
    
        $scope.save = function(myForm) {
        console.log('Selected Value: '+ myForm.service_id.$modelValue);
        alert('Data Saved! without validate');
        };
            }
    

    Here's a working plunker.