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".
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With