CODEWITHSUNDEEP
javascriptangularjs
AlexCOM
AlexCOM

Reputation: 129

AngularJS Dropdown required validation before submit

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.

Upvotes: 0

Views: 10554

Answers (3)

Chirag
Chirag

Reputation: 317

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.

Upvotes: 0

Keshan Nageswaran
Keshan Nageswaran

Reputation: 8188

Below code snippet gives an example, according to the code that is posted in the question few comments 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.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>

Upvotes: 2

rrd
rrd

Reputation: 5977

Try adding an extra check in for $pristine:

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

Upvotes: 0

Related Questions