CODEWITHSUNDEEP
javascriptjqueryangularjshtml
Abhishek
Abhishek

Reputation: 295

How to disable button if fields are not Filled in ng-repeat?

Hello Everyone i am facing some problem regarding my save button. I want to disable my button if there is no data entered in any index. If all index are blank then my button should be disabled if one of the index is filled then enable my button

Here is my Plunkr Link http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview

Here is my html file:

  <!DOCTYPE html>
   <html ng-app="myApp">
   <head>
   <link rel="stylesheet" href="style.css">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4
    /angular.min.js">
     </script>
    <script src="script.js"></script>
   `enter code here`</head>
 <body>
    <form action="#" ng-controller='detailContrller'>
     <div class="control-group" ng-repeat="story in stories"> <br>
        <h4> Enter Data </h4>
         Name :  <input type="text" data-ng-model="selection[story].Name1" 
                    placeholder="Enter Name">  <br>
      Address :  <input type="text" data-ng-model="selection[story].Name2" 
                    placeholder="Enter Address">  <br>
      City :    <input type="text" data-ng-model="selection[story].Name3"
                    placeholder="Enter City">  <br>
      Phone :  <input type="text" data-ng-model="selection[story].Name4" 
                    placeholder="Enter Phone ">  <br>
      State :  <input type="text" data-ng-model="selection[story].Name5" 
                    placeholder="Enter State">  <br>

    <input type="checkbox" ng-model="selection[story].all"
        ng-change="updateAll(story)">
    <label class="control-label">IncludeAll {{story}}</label>
      <div class="controls">
          <label class="checkbox inline" ng-repeat="browser in browsers">
            <input type="checkbox" value="{{browser}}"
             ng-model="selection[story].browsers[browser]" 
               ng-change="checkChange(browser)"
            > {{browser}}
            </label>
        </div>
      </div>
      <button type="button" data-ng-click="save()">Save</button>
       <pre>{{selection | json}}</pre>
    </form>
  </body>
</html>

controller

var app = angular.module("myApp",[]);
app.controller('detailContrller', function($scope){

$scope.stories = [];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
$scope.details = {};
var checked;
$scope.updateAll = function (story) {
    checked = $scope.selection[story].all;
    $scope.browsers.forEach(function (browser) {
        $scope.selection[story].browsers[browser] = checked;
    });
};

for(var i = 0; i< 3; i++) {
$scope.stories.push(i+1);
}
$scope.checkChange = function (browser) {
    for(var i =0; i< $scope.stories.length; i++){
        if(!$scope.stories[i].selected){
        $scope.checked = false
        return false;
        }
    }
}
angular.forEach($scope.stories, function(storgy) {
    $scope.selection[storgy] = {
        browsers: {}
    };
});

$scope.save = function () {
console.log($scope.selection);
}
})

Please check this and give me a solution Thanks in advance.

Upvotes: 1

Views: 2313

Answers (1)

Rasalom
Rasalom

Reputation: 3111

You can do it by adding name to form and 'required' attribute to inputs and ng-disabled to button:

<form action="#" ng-controller='detailContrller' name="MyForm">
    <div class="control-group" ng-repeat="story in stories"> <br>
        <h4> Enter Data </h4>
                 Name :  <input type="text" data-ng-model="selection[story].Name1" 
                            placeholder="Enter Name" required>  <br>
              Address :  <input type="text" data-ng-model="selection[story].Name2" 
                            placeholder="Enter Address" required>  <br>
              City :    <input type="text" data-ng-model="selection[story].Name3"
                            placeholder="Enter City" required>  <br>
              Phone :  <input type="text" data-ng-model="selection[story].Name4" 
                            placeholder="Enter Phone " required>  <br>
              State :  <input type="text" data-ng-model="selection[story].Name5" 
                            placeholder="Enter State" required>  <br>

    <input type="checkbox" ng-model="selection[story].all" ng-change="updateAll(story)">
    <label class="control-label">IncludeAll {{story}}</label>
            <div class="controls">
                <label class="checkbox inline" ng-repeat="browser in browsers">
                    <input type="checkbox" value="{{browser}}" ng-model="selection[story].browsers[browser]" ng-change="checkChange(browser)"
                    required > {{browser}}
                    </label>
                </div>
        </div>
    <button type="button" data-ng-click="save()" ng-disabled="MyForm.$invalid">Save</button>
    <pre>{{selection | json}}</pre>
</form>

http://plnkr.co/edit/qJjt5bLHbCVnHW5k2XEZ?p=preview

See validation part here:

https://docs.angularjs.org/guide/forms

Upvotes: 2

Related Questions