1

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.

kumareloaded
  • 3,882
  • 14
  • 41
  • 58
Abhishek
  • 295
  • 1
  • 4
  • 25

1 Answers1

2

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

Rasalom
  • 3,101
  • 3
  • 21
  • 29
  • hello #Rasalom you are right about using required,but i want enable my button if one of the index is filled. in ur case of required to enable a button filled all the index. so please give me a solution. – Abhishek Dec 03 '14 at 13:54
  • ok, I got what you want to do, I don't think there is built-in solution for that, try creating directive like described here: http://stackoverflow.com/questions/25180698/angularjs-multiple-forms-with-ng-repeat-validation and mock required behavior for form inside directive, so it will behave like single element. – Rasalom Dec 03 '14 at 14:00
  • ok, i will try this hope it's help. If any other solution you have regarding this please let me know. – Abhishek Dec 03 '14 at 14:04