AngularJS Dropdown required validation

Question

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

score 119 · Accepted Answer · edited Sep 17 '19 at 11:10

119

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.

edited Sep 17 '19 at 11:10

Divyesh patel

967
1
6
21

answered Mar 12 '13 at 14:09

Stewie

60,366
20
146
113

7

It should be mentioned that select needs ng-model for this to work – phikes Aug 26 '13 at 10:21
3

Correct, ngOptions require ngModel. – Stewie Aug 26 '13 at 11:38
2

You have used Dirty, but the user who pressed the submit button directly will not see this message. If you set a parameter like showmessage when you submit the form and use this parameter instead of dirty, it works better. – seyfside Dec 05 '16 at 11:25
2

I am having an issue with this example. I have a submit button. It works for if I change the selected option to something that is non-default, then switching back to default and trying to submit. The error msg properly shows. But, if I come to the screen and immediately click the submit button, no error message is shown even though the default option is...defaultly selected. – ScubaSteve Jan 23 '17 at 18:19
2

I was able to overcome this by setting the variable I have as the ng-model for the select to null and having the ng-show as (formName.myoption.$dirty || isSubmitted) && formName.myoption.$error.required. With isSubmitted being set to true when the Submit button is clicked. – ScubaSteve Jan 23 '17 at 19:01
How would one also set myForm.service_id as $invalid for example if ServiceID < 2? I tried min="2" to no avail. Also, I'm using Angular Materials md-select if that matters. – Gary Jan 24 '17 at 16:27
Genious - didnt have id/name attribute and validation was not working properly - it prevented form submission, but didn't show error on the field. – thorinkor Jan 04 '18 at 09:59

AngularJS Dropdown required validation

1 Answers1

Linked