ng-disabled is not disabling a button in Angular JS

Question

Why does the Button is not disable?

 var mainApp = angular.module('mainApp', []); mainApp.controller('mainController', function ($scope) { $scope.form = { login: '' }; }); 

 <form ng-controller="LoginAppCtrl as lc" ng-app="MTApp"> <div class="login"> <h1>LOG IN</h1> </div> <div> <div>User Name :</div> <div> <input type="text" name="tbUserName" required ng-model="lc.request.user"> </div> </div> <div> <div>Password :</div> <div> <input type="text" name="tbPassword" required ng-model="lc.request.password"> </div> </div> <div> <div> <button ng-click="lc.submitRequest()" ng-disabled="lc.request.user == '' || lc.request.password == '' ">Sign In</button> </div> </div> </form> 

I'm new in Angular JS and I am trying to make a simple login form, that if login success will be shown other form, and if not, login form will be stayed. Can anyone help me? I need the basic tutorials.

Answer 1

You have several mistakes in your code:

The first one is that you're declaring your module as main app: angular.module('mainApp', []); but you are doing ng-app="MTApp" . You need to use the app that you declared, meaning it needs to be ng-app="mainApp" .

Same goes for the controller declaration and ng-controller , it needs to be the same.

Second issue is that if request is an object, you should initiate it at your controller:

$scope.request = {};

Third issue is that you need to check for undefined as well, not just an empty string:

ng-disabled="!request.user || !request.password"

Look at this Fiddle for a complete code & HTML.

Answer 2

The disabling button functionality can be accomplished in two ways

1) Based on values in the text boxes, with out relating to controller object. Give some name to form element like

<form name='form1'>
  <div>
    <div>User Name :</div>
      <input type="text" name="tbUserName" required ng-model="lc.request.user">
  </div>
  <div>
    <div>Password :</div>
      <input type="text" name="tbPassword" required ng-model="lc.request.password">
  </div>
  <div>
    <button ng-disabled="form1.$invalid">Sign In</button>
  </div>
</form>

2) Based on Object defined in the controller.

If you have an object in your controller say $scope.user = {name:'', password:''} then at input boxes you can use ng-model='user.name' and ng-model = 'user.password' At the submit button, you can use ng-disabled=" user.name === '' || user.password === '' " Then also, the submit button will be disabled unless you fill those two text boxes.

<form>
  <div>
    <div>User Name :</div>
      <input type="text" name="tbUserName" required ng-model="user.name">
  </div>
  <div>
    <div>Password :</div>
      <input type="text" name="tbPassword" required ng-model="user.password">
  </div>
  <div>
    <button ng-disabled="user.name==='' || user.password===''">Sign In</button>
  </div>
</form>

And the controller should have object defined

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.user = {name:'',password:''};
});

Is this you are expecting?