I have Dropdown list in my form. i need to off my submit btn before i choose element from list. my btn:

<input type="submit" value="Get" ng-disabled="form.$invalid " />

i tried to use This . But my button bee invalid only when i choose element and after that choose emty. From start it visible.

EDIT: Added all my code

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

  <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>
  <input type="submit" value="Get" ng-disabled="form.$invalid " />
</form>

I would like to get error message like this: "Service required" what will disable my btn.

I have Dropdown list in my form. i need to off my submit btn before i choose element from list. my btn:

<input type="submit" value="Get" ng-disabled="form.$invalid " />

i tried to use This . But my button bee invalid only when i choose element and after that choose emty. From start it visible.

EDIT: Added all my code

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

  <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>
  <input type="submit" value="Get" ng-disabled="form.$invalid " />
</form>

I would like to get error message like this: "Service required" what will disable my btn.

• javascript
• angularjs

• 1 Add more conditions on ng- disabled. Could you share your form code? So that I can see specific solution. – Pankaj Kumar Singh Commented Feb 24, 2017 at 11:46
• 1 add 'novalidate' to the form tag – rrd Commented Feb 24, 2017 at 12:07
• name of form in your code is "form" and you're using form name "myForm" in ng-show of span. Change it to "form.service_id.$error.required" – Chirag Commented Mar 14, 2017 at 12:19

3 Answers 3

Below code snippet gives an example, according to the code that is posted in the question few ments i would like to make

1. Add class .form-control to all textual <input>, <textarea>, and <select> elements
2. Error message can be show like this <span class="help-inline" ng-show="submitted && form.businessprocess.$error.required">Required</span>
3. Use ng-class to have control over the required field even after submission check below explanation as well

form to have control over the required field option even after the submit, it has to be explicitly mention that what it's behavior should be. Because in the dropdown scenarion sometimes user might select the default value in the below code it's <option value="">-- Select Business Process --</option> to track that in my code i have mentioned that ng-class="{true: 'error'}[submitted && form.businessprocess.$invalid]" this tells its error when form is submitted and the specified form field is $invalid. mostly it's used as ng-class="{'has-success': inputform.email.$valid, 'has-error': inputform.email.$invalid}" in ng-class attribute

<link href="http://netdna.bootstrapcdn./twitter-bootstrap/2.3.1/css/bootstrap-bined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="form" ng-app>
  <div class="control-group" ng-class="{true: 'error'}[submitted && form.businessprocess.$invalid]">
    <label class="control-label" for="businessprocess">Your Test dropdown</label>
    <div class="controls">
      <select class="form-control" name="businessprocess" ng-model="businessprocess" required>
        <option value="">-- Select Business Process --</option>
        <option value="C">Process C</option>
        <option value="Q">Process Q</option>
      </select>
      <span class="help-inline" ng-show="submitted && form.businessprocess.$error.required">Required</span>
    </div>
  </div>

  <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true" ng-disabled ="form.$invalid ">Submit</button>
</form>

Try adding an extra check in for $pristine:

<input type="submit" value="get" ng-disabled="form.$pristine || form.$invalid" />

Use below code for form validation.

HTML

<form role="form" name="form" ng-submit="mysubmit()" ng-controller="Ctrl">

  <select name="service_id" class="Sitedropdown" style="width: 220px;"          
          ng-model="ServiceID" 
          ng-options="service.ServiceID as service.ServiceName for service in services"
          ng-required="true"> 
    <option value="">Select Service</option> 
  </select>
  <div data-ng-show="form.service_id.$dirty && form.service_id.$invalid">
            <span data-ng-show="form.service_id.$error.required">Select service</span>
    </div>
  <input type="submit" value="Get" ng-disabled="form.$invalid " />
</form>

Angular Controller

angular.module("myApp").controller("Ctrl", ["$scope", function($scope){
        $scope.mysubmit = function(){
          alert("mysubmit");
        };

        $scope.services = [{ServiceID : 1,ServiceName: "A" }, {ServiceID : 2,ServiceName: "B" }]
      }]);

You can pass full form as parameter in ng-submit function for further use.