Question

76

AngularJS Dropdown required validation

rated 0 times [ 80] [ 4] / answers: 1 / hits: 149008 / 11 Years ago, tue, march 12, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aileent

Add To Favorites

Follow

Total Points: 556

Total Questions: 107

Total Answers: 101

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

answered 11 Years ago clarkulisesa · Accepted Answer

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.