when button disabled to enable calling function to show progressBar in angular js?

Question

Form is empty, submit button dissabled, when user selected all input field submit button now dissable to enable that status change that time I need to call function to show progressbar.I tried bellow code.

html
----

<html>
<body>
{{message}}
</body>
</html>

you could add `ng-if` with flag on progressbar `div` and then on submit button click show that `div` — Pankaj Parkar, Mar 03 '17 at 04:37
Do you want to disable submit button when you are showing progress bar? I'm not getting your question — Naghaveer R, Mar 03 '17 at 04:47
That because you are not calling progressBarShow() function anywhere in your code. what time you want to call the ProgressBarShow()? Is it on radio button change or Any change inside your form? — Naghaveer R, Mar 03 '17 at 06:14
Possible duplicate of [How to make a loading (spin) while requesting to server by $http on angularJS](http://stackoverflow.com/questions/42053302/how-to-make-a-loading-spin-while-requesting-to-server-by-http-on-angularjs) — Aravind, Mar 04 '17 at 07:38

Manoj Patidar · Answer 1 · 2017-03-03T06:24:48.883

You can check form validation on progress bar if form is valid then display progress bar

HTML Code

<style>
  button.st{
  padding:5px ;
  border:1px solid #ccc;
  /* background:green; */
  /* border:1px solid lightblue; */
/*   color:darkblue; */
  margin:10px;
}
.progressbar{
  border:1px solid #fff;padding:10px;border-radius:1px;width:60%;margin:10px;background:#999;color:red;
}
p{
  margin-left:10px;
}
</style>
  <body >
    <div ng-controller="MyCtrl">
<p progressbar prog="form1.$valid ? '50':'10'" ></p>


<form name="form1" novalidate>
  <p>
       <span style="color:blue">1) select One</span><br/>
       <input type="radio" ng-model="user.q1" name="grp1" value="A" ng-required="true"/>A
       <input type="radio" ng-model="user.q1" name="grp1" value="B" ng-required="true"/>B
       <input type="radio" ng-model="user.q1" name="grp1" value="C" ng-required="true"/>C
  </p>
  <p>
       <span style="color:blue">2) select two</span><br/>
       <input type="radio" ng-model="user.q2" name="grp2" value="A" ng-required="true"/>A
       <input type="radio" ng-model="user.q2" name="grp2" value="B" ng-required="true"/>B
       <input type="radio" ng-model="user.q2" name="grp2" value="C" ng-required="true"/>C
       </p>
    <button class="st" ng-disabled="form1.$invalid"> submit</button>
  </p>
</form>
</div>
  </body>

</html>

Controller js Code

var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope) {
  $scope.name = 'World';
   $scope.name = 'pelase select all fileds';
    $scope.progressBar = false;
    $scope.progressbarShow = function(){
     $scope.progressBar = true;
    }
});
app.directive('progressbar', [function() {
return {
    restrict: 'A',
    scope: {
        'progress': '=prog'
    },
    template: '<div class="stripe" style="background-color: #C7D2D2; height:30px; width:100%;"> <div  ng-style="style" style="background-color:#8CD211; height:100%"></div> </div>',
    controller: function($scope, $element, $attrs) {       
     $scope.$watch(function() {
            $scope.style = {"width": $scope.progress + "%"}
        })
    }
}

}])

please check working plnkr http://plnkr.co/edit/y35BnTUG36ChnCSC2YYH?p=preview

the issue in your custom directive please fixed this then it display — Manoj Patidar, Mar 03 '17 at 05:28
still not clear your requirment please check this plnkr http://plnkr.co/edit/y35BnTUG36ChnCSC2YYH?p=preview — Manoj Patidar, Mar 03 '17 at 06:25

score 0 · Answer 2 · answered Mar 03 '17 at 06:28

You can use $watch on $scope.user to watch change in radio buttons

 $scope.$watch("user", function() {
      if(!angular.isUndefined($scope.user.q1) && !angular.isUndefined($scope.user.q2))
      $scope.increaseProgress = 50;
    }, true);

angular.module("app", [])
  .controller("main", ['$scope', function($scope) {
    $scope.user={};
    $scope.increaseProgress = 10;
    $scope.progressBarShow = function() {
      alert("Coming");
      $scope.increaseProgress = 50;
    }

    $scope.$watch("user", function() {
      if(angular.isUndefined($scope.user.q1) && angular.isUndefined($scope.user.q2))
      $scope.increaseProgress = 50;
    }, true);
  }])
  .directive('progressbar', [function() {
    return {
      restrict: 'A',
      scope: {
        'progress': '=progressbar'
      },
      template: '<div class="stripe" style="background-color: #442; height:50px; width:100%;"> <div  ng-style="style" style="background-color:#CD2; height:100%"></div> </div>',
      controller: function($scope, $element, $attrs) {
        $scope.$watch(function() {
          $scope.style = {
            "width": $scope.progress + "%"
          }
        })
      }
    }
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>

<div ng-app="app" ng-controller="main">
  <div progressbar="increaseProgress" ng-show="form1.$valid"></div>
  <form name="form1" novalidate>
    <p>
      <span style="color:blue">1) select One</span>
      <br/>
      <input type="radio" ng-model="user.q1" name="grp1" value="A" ng-required="true" />A
      <input type="radio" ng-model="user.q1" name="grp1" value="B" ng-required="true" />B
      <input type="radio" ng-model="user.q1" name="grp1" value="C" ng-required="true" />C
    </p>
    <p>
      <span style="color:blue">2) select two</span>
      <br/>
      <input type="radio" ng-model="user.q2" name="grp2" value="A" ng-required="true" />A
      <input type="radio" ng-model="user.q2" name="grp2" value="B" ng-required="true" />B
      <input type="radio" ng-model="user.q2" name="grp2" value="C" ng-required="true" />C
    </p>
    <button class="st" ng-disabled="form1.$invalid"> submit</button>
  </form>
</div>

when button disabled to enable calling function to show progressBar in angular js?

2 Answers2