ng-disabled не отключает кнопку в Angular JS

Question

Почему кнопка не отключена?

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> \t 
 
    </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>

Я новичок в угловых JS, и я пытаюсь сделать простую регистрационную форму, что если войти в успех будет показан другой вид, а если нет, то форма Логин будет остался , Может ли кто-нибудь мне помочь? Мне нужны основные уроки.

Answer 1

Инвалидизирующее функциональные кнопки можно осуществить двумя способами

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:''}; 
}); 

Это вы ждете?

Answer 2

У вас есть несколько ошибок в коде:

Первый из них является то, что вы объявляя свой модуль в качестве основного приложения: angular.module('mainApp', []); но вы делаете ng-app="MTApp". Вам нужно использовать объявленное вами приложение, то есть оно должно быть ng-app="mainApp".

То же самое касается декларации контроллера и ng-controller, она должна быть одинаковой.

Второй выпуск что если request является объектом, вы должны начать его на контроллере:

$scope.request = {}; 

Третий вопрос в том, что вы должны проверить undefined, а не просто пустой строка:

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

Посмотрите на эту Fiddle для полного кода & HTML.