AngularJS Dropdown required validation before submit

Question

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

Add more conditions on ng- disabled. Could you share your form code? So that I can see specific solution. — Pankaj Kumar Singh, Feb 24 '17 at 11:46
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, Mar 14 '17 at 12:19

Keshan Nageswaran · Accepted Answer · 2017-02-24T12:32:36.720

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

Add class .form-control to all textual <input>, <textarea>, and <select> elements
Error message can be show like this <span class="help-inline" ng-show="submitted && form.businessprocess.$error.required">Required</span>
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.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/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>

score 0 · Answer 2 · answered Feb 24 '17 at 11:43

0

Try adding an extra check in for $pristine:

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

answered Feb 24 '17 at 11:43

rrd

5,789
3
28
36

score 0 · Answer 3 · answered Feb 24 '17 at 13:03

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.

AngularJS Dropdown required validation before submit

3 Answers3