javascript - AngularJS Dropdown required validation before submit - Stack Overflow

admin管理员组

文章数量:1023794

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

Share Improve this question Follow edited May 23, 2017 at 12:10 CommunityBot 111 silver badge asked Feb 24, 2017 at 11:40 AlexCOMAlexCOM 12922 gold badges33 silver badges1111 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

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

Share Improve this question Follow edited May 23, 2017 at 12:10 CommunityBot 111 silver badge asked Feb 24, 2017 at 11:40 AlexCOMAlexCOM 12922 gold badges33 silver badges1111 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

本文标签： javascriptAngularJS Dropdown required validation before submitStack Overflow