Enable A Button On Entering Text In Input Field

I want to enable a button only when a text is entered on an input field. So far I have this code on my app.js .controller('EnableDisable', function(){ $scope.editableInput = fals

Solution 1:

you can do this with Angular.

<input type="text" ng-model="textEntered" />
<button ng-disabled="!textEntered">Continue</button>

Solution 2:

Try this one

controller("EnableDisable", function($scope){
  $scope.textEntered = "";
});

HTML :

<button ng-disabled="!textEntered">enable/disable</button>

Please refer Plunker

Solution 3:

You will have to set initial scope value like this.Note that I have set it false so condition will negate and make button disable on page load.Then I have set a watch on input value accordingly toggled the scope value.

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

app.controller("EnableDisable",  function(){    
  $scope.textEntered=false;

  $scope.$watch($scope.textEntered,function(v)
  {
   if(v)
   {
     $scope.textEntered=true;
   }
   else
   {
     $scope.textEntered=false;
   }
  }
  );
});

and html is -

<input type="text" ng-model="textEntered" />
<button ng-disabled="!textEntered">Continue</button>

https://plnkr.co/edit/o1Im8MSXbEa8kyqPqBB9?p=preview