CODEWITHSUNDEEP
htmlangularjstwitter-bootstrap
dexter
dexter

Reputation: 117

disable the button till the input fields are filled not working

I want to disable the submit button till all the input fields are filled in the page using angularjs/bootstrap. I tried using ng-disabled="myForm.$invalid" but it doesn't seem to work. Any inputs?

Demo

HTML Code

<form name="myForm" ng-controller="ExampleController">
   <div>Select Color : </div>
      <label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
                        <input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)" required> {{color}}
                  <br>  </label><br>
                <div ng-show="myForm.$submitted || myForm.color.$touched">
                    <p class="error-mesg" ng-show="myForm.color.$error.required">Please Select the color</p>
                </div>
            <div class="">
                <div style="color: black;">Username : </div>
               <input type="text" name="user" value="" required>
                <div ng-show="myForm.$submitted || myForm.user.$touched">
                    <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                </div>
            </div>
            <br>
  <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)" ng-disabled="myForm.$invalid">Submit</button>
</form>

Upvotes: 1

Views: 398

Answers (5)

Thamira Madusanka
Thamira Madusanka

Reputation: 129

I did two changes:

  1. add ng-model for your fields
  2. in check boxes I change the model name as ng-model="color_$index"

$index get the index of the array and it helps to identify each checkbox individually.

<form name="myForm" ng-controller="ExampleController">
        <div>Select Color : </div>
                <label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
                    <input type="checkbox" name="color" ng-model="color_$index" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)" required> {{color}}
                    <br>
                </label>
                <br>
                <div ng-show="myForm.$submitted || myForm.color.$touched">
                    <p class="error-mesg" ng-show="myForm.color.$error.required">Please Select the color</p>
                </div>
                <div class="">
                    <div style="color: black;">Username : </div>
                    <input type="text" name="user" ng-model="username" value="" required>
                    <div ng-show="myForm.$submitted || myForm.user.$touched">
                        <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                    </div>
                </div>
                <br>
        <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)" ng-disabled="myForm.$invalid">Submit</button>
        </form>

Upvotes: 0

dilip
dilip

Reputation: 51

You need to do 2 additional things, 1. Use ng-required for all the inputs instead of required. and add ng-model for all the inputs. 2. for checkboxes, you need to check if atleast one of the checkboxes is selected. If one is selected you can make ng-required = false. For that you can check if the length of the selectedColor is greater than 0.

PFB the modified code,

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-checkbox-input-directive-production</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>

</head>
<body ng-app="checkboxExample">
  <script>  
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

      $scope.colorNames = ['RED', 'BLUE', 'BLACK'];
        $scope.selectedColor = [];
        $scope.userSelection = function userSelection(team) {
            var idx = $scope.selectedColor.indexOf(team);
          if (idx > -1) {
                $scope.selectedColor.splice(idx, 1);
            }
            else {
                $scope.selectedColor.push(team);
            }
        };
        $scope.submitForm = function(){
            if ($scope.selectedColor != "" && $scope.selectedColor != undefined && $scope.user != "" && $scope.user != undefined) {
          alert("all fields are entered");
            }else{

            }
        } 


    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <div>Select Color : </div>
      <label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
                        <input type="checkbox" ng-model="checked" name="color" ng-required="selectedColor.length==0" value="{{color}}" ng-click="userSelection(color)" > {{color}}
                  <br>  </label><br>
                <div ng-show="myForm.$submitted || myForm.color.$touched">
                    <p class="error-mesg" ng-show="myForm.color.$error.required">Please Select the color</p>
                </div>
            <div class="">
                <div style="color: black;">Username : </div>
              <input type="text" name="user" value="" ng-model="user" ng-required="true">
                <div ng-show="myForm.$submitted || myForm.user.$touched">
                    <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                </div>
            </div>
            <br>
  <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)" ng-disabled="myForm.$invalid">Submit</button>



</form>
</body>
</html>

Upvotes: 0

sison kk
sison kk

Reputation: 79

add ng-model to your input field

  <input type="text" name="user" value="" ng-model="user" required>

Upvotes: 1

Flemin Adambukulam
Flemin Adambukulam

Reputation: 860

You have written the condition wrong. Please write ng-disabled="!myForm.$invalid". Also, writing {{myForm.$invalid}} in html shows its current value which was false in your case.

    <form name="myForm" ng-controller="ExampleController">
       <div>Select Color : </div>
          <label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
                            <input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)" required> {{color}}
                      <br>  </label><br>
                    <div ng-show="myForm.$submitted || myForm.color.$touched">
                        <p class="error-mesg" ng-show="myForm.color.$error.required">Please Select the color</p>
                    </div>
                <div class="">
                    <div style="color: black;">Username : </div>
                   <input type="text" name="user" value="" required>
                    <div ng-show="myForm.$submitted || myForm.user.$touched">
                        <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                    </div>
                </div>
                <br>
{{myForm.$invalid}}
<button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)" ng-disabled="!myForm.$invalid">Submit</button>
    </form>

Upvotes: 1

Arun
Arun

Reputation: 460

I think you missed to add ng-model for checkbox and textbox.

Can you please check below code.

<meta charset="UTF-8">
  <title>Example - example-checkbox-input-directive-production</title>
   <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
   
</head>
<body ng-app="checkboxExample">
  <script>  
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      
      $scope.colorNames = ['RED', 'BLUE', 'BLACK'];
        $scope.selectedColor = [];
        $scope.userSelection = function userSelection(team) {
            var idx = $scope.selectedColor.indexOf(team);
           if (idx > -1) {
                $scope.selectedColor.splice(idx, 1);
            }
            else {
                $scope.selectedColor.push(team);
            }
        };
        $scope.submitForm = function(){
             if ($scope.selectedColor != "" && $scope.selectedColor != undefined && $scope.user != "" && $scope.user != undefined) {
          alert("all fields are entered");
            }else{
               
            }
        } 
        
    
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
   <div>Select Color : </div>
      <label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
                        <input type="checkbox" name="color" ng-model="colouer" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)" required> {{color}}
                  <br>  </label><br>
                <div ng-show="myForm.$submitted || myForm.color.$touched">
                    <p class="error-mesg" ng-show="myForm.color.$error.required">Please Select the color</p>
                </div>
            <div class="">
                <div style="color: black;">Username : </div>
               <input type="text" name="user" value="" ng-model="username" required>
                <div ng-show="myForm.$submitted || myForm.user.$touched">
                    <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                </div>
            </div>
            <br>
  <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)" ng-disabled="myForm.$invalid">Submit</button>

   

 </form>
</body>
</html>

Upvotes: 2

Related Questions