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.

Still not working in my app jsfiddle.net/1urcz8r3 Moreover where do I set which form will be shown when success login and that the login form will stay in failure? Thanks — userit1985
– userit1985, Commented Feb 8, 2015 at 14:11

Omri Aharon · Accepted Answer · 2015-02-08 11:02:39Z

2

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.

answered Feb 8, 2015 at 11:02

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

6 Comments

userit1985 Over a year ago

I had done as you wrote. main.js var MEControllers = angular.module('MEControllers',[]); MEControllers.controller('LoginAppCtrl', function ($scope) { $scope.form = { login: '' }; $scope.request = {}; });

userit1985 Over a year ago

Still not working in my app jsfiddle.net/1urcz8r3 Moreover where do I set which form will be shown when success login and that the login form will stay in failure? Thanks

Omri Aharon Over a year ago

@userit1985 You declared 2 ng-apps there instead of one, and you have dependency issues which cause errors and therefore nothing works.

Omri Aharon Over a year ago

@userit1985 And also you did not declare AngularJS on the fiddle itself on the top left corner. Compare to my fiddle.

userit1985 Over a year ago

So how should I wrote my Login form using function LoginAppCtrl($scope, $http,utilities,$location) {?

|

Rajeshwar · Accepted Answer · 2015-02-08 11:26:49Z

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?

Collectives™ on Stack Overflow

ng-disabled is not disabling a button in Angular JS

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related