在角度JS中，ng禁用不是禁用按钮

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.

我是角JS的新手，我正在尝试做一个简单的登录表单，如果登录成功将显示其他表单，如果没有，登录表单将被保留。谁能帮我吗?我需要基本的教程。

2 个解决方案

#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".

第一个是你要声明你的模块为主应用:角。模块(“mainApp”,[]);但是你做的是ng-app="MTApp"您需要使用您声明的应用程序，这意味着它需要是ng-app="mainApp"。

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

控制器声明和ng-controller也是一样的，它需要是一样的。

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.

看看这个小提琴的完整代码和HTML。

#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

1)基于文本框中的值，与控制器对象无关。给元素命名，比如

<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.

2)基于控制器中定义的对象。

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.

如果你的控制器中有一个对象，就说$scope。用户= {name: "， password: "}那么在输入框中可以使用ng-model='user.name'和ng-model='user '。在submit按钮上，可以使用ng-disabled=" user.name === " ||用户"。密码=== " " "那么，提交按钮也将被禁用，除非您填写这两个文本框。

<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?

这是你期待的吗?

#1