ng disabled不是禁用Angular JS中的按钮

ng-disabled is not disabling a button in Angular JS

本文关键字：JS 按钮 Angular disabled ng      更新时间：2023-09-26

为什么按钮没有被禁用？

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>

我是Angular JS的新手，我正在尝试制作一个简单的登录表单，如果登录成功，将显示其他表单，如果不成功，则登录表单将保留。有人能帮我吗？我需要基本的教程。

您的代码中有几个错误：

第一个是您将模块声明为主应用程序：angular.module('mainApp', []);，但您正在执行ng-app="MTApp"。您需要使用您声明的应用程序，这意味着它需要是ng-app="mainApp"。

控制器声明和ng-controller也是如此，它需要相同。

第二个问题是，如果request是一个对象，您应该在您的控制器上启动它：

$scope.request = {};

第三个问题是您还需要检查undefined，而不仅仅是一个空字符串：

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

看看这个Fiddle的完整代码&HTML。

禁用按钮功能可以通过两种方式实现

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） 基于控制器中定义的对象。

如果您的控制器中有对象，请说$scope.user = {name:'', password:''}然后在您可以使用的输入框ng-model='user.name'和ng-model = 'user.password'在提交按钮，您可以使用ng-disabled=" user.name === '' || user.password === '' "然后，提交按钮将被禁用，除非您填写这两个文本框。

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

控制器应具有对象定义的

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

这是你期待的吗？

相关文章：