Enable disable button from controller in angular.js

Question

I have a button which needs to be controlled on the basis of if the user has entered the values in the html page.

I have binded model to the text field and set a disabled variable on the $scope, which is enabled/disabled on the value of the input field model.

Here is the HTML

<!--This button should be disabled if no value is enterd in both the field-->
  <input type='button' value='click' ng-disabled='disabled'>
  <br>
  <input type="text" ng-model="first">
  <br>
  <input type="text" ng-model='last'>

And here is the correponding angular controller.

angular.module('app', []).controller('myController', function($scope) {

  $scope.disabled = !$scope.first || !$scope.last;

})

It runs for the first time, but then don't show changes on the basis of later modifications.

As per my understanding angular uses two way binding, so if I am modifying anything on the view it should be reflected on the controller, and then anything changed on the controller should be reflected on the view. What wrong I am doing here?

PS: I dont want to use form
I want to avoid the onChange event on the text input field.

Please refer the plunk http://plnkr.co/edit/L5wkcpNzMMBZxtcitJwk?p=preview

Tim Biegeleisen · Accepted Answer · 2016-11-17 07:46:26Z

3

Use ng-disabled='!first || !last'.

The following logic seems to work, at least in your Plunker:

<input type='button' value='click' ng-disabled='!first || !last'>
<br>
<input type="text" ng-model="first">
<br>
<input type="text" ng-model='last'>

It is true that the scoped variable $scope.first and $scope.last are two-way bound to the controller. This means that any change in the input boxes should automatically reflect in the state of these variables. But disabled is a computed quantity, and this is calculated once, at the time the controller loads, but not again in your code. Hence, disabled appears to always be true, even after you have entered text into both input boxes.

Plunker

answered Nov 17, 2016 at 7:46

Tim Biegeleisen

526k32 gold badges323 silver badges399 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pankaj Over a year ago

Thanks for giving the proper explanation. I was sure that ng-change will work as suggested in other answer, but it will be last resort I will look for.

Tim Biegeleisen Over a year ago

@Pankaj If you needed to do other things upon a change event, then you can consider going with Sajeetharan's answer. But for your simple case, I would prefer to not have to add extra logic to your controller.

Pankaj Over a year ago

Going by this approach lets say I have n number of fields, rather than first and last, so it will add up a lengthy expression for ng-disabled, is there a nice clean way to achieve this? Again ng-change is last resort

Tim Biegeleisen Over a year ago

I don't see a clean way of doing this, which would not involve checking each field to see whether or not it be "truthy" (i.e. has something in it).

Pankaj Over a year ago

Thanks Tim, I will go with ng-change that, dont want to put much of logic on the view

Sajeetharan · Accepted Answer · 2016-11-17 07:48:15Z

1

You can do this by detecting the changes in the inputs

angular.module('app', []).controller('myController', function($scope) {
  $scope.change = function() {
    $scope.disabled = !$scope.first || !$scope.last;
  }    
})

HTML

 <input type='button' value='click' ng-disabled='disabled'>
  <br>
  <input type="text" ng-change="change()" ng-model="first">
  <br>
  <input type="text" ng-change="change()" ng-model='last'>

DEMO

answered Nov 17, 2016 at 7:48

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

S Vinesh · Accepted Answer · 2016-11-17 07:46:10Z

0

Try this

angular.module('app', []).controller('myController', function($scope) {

     $scope.disabled = !$scope.first=="" || !$scope.last == "";

})

answered Nov 17, 2016 at 7:46

S Vinesh

5391 gold badge5 silver badges15 bronze badges

Comments

SURJEET SINGH Bisht · Accepted Answer · 2016-11-17 07:49:17Z

0

use this one. i hope it helps:

      $scope.disabled=($scope.first==""?true:($scope.last==""?true:false))

answered Nov 17, 2016 at 7:49

SURJEET SINGH Bisht

88110 silver badges16 bronze badges

2 Comments

empiric Over a year ago

Can you explain your answer? What did you do and why does it work?

SURJEET SINGH Bisht Over a year ago

actuly i placed the ternary operator.First of all if will check that first is empty or not if not then it will check to last

User · Accepted Answer · 2016-11-17 07:52:55Z

0

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app>
<input type='button' value='click' ng-disabled='first.length==0||last.length==0||first==undefined||last==undefined'>
     <br>
    <input type="text" ng-model="first">
     <br>
      <input type="text" ng-model='last'>
</div>

answered Nov 17, 2016 at 7:52

User

1,3735 gold badges29 silver badges61 bronze badges

Comments

Batman · Accepted Answer · 2016-11-17 07:54:40Z

I have edited the plunker. Please chack it and let me know.

js code:

angular.module('app',[]).controller('myController', function($scope){

  $scope.disabled = true;

  $scope.func=function() {
   $scope.disabled = true;
    if($scope.first && $scope.last) {
      $scope.disabled=false;
    }
  }

})

HTML code:

<!DOCTYPE html>
<html ng-app='app'>

<head>
  <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller='myController'>

  <!--This button should be disabled if no value is enterd in both the field-->
  <input type='button' value='click' ng-disabled='disabled'>
  <br>
  <input type="text" ng-model="first" ng-change="func()">
  <br>
  <input type="text" ng-model='last' ng-change="func()">
</body>

</html>

Collectives™ on Stack Overflow

Enable disable button from controller in angular.js

6 Answers 6

Plunker

5 Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related