ngSubmit и ngDisabled не работают, но ngModel привязан к контроллеру

Question

Это не выглядит ничем не отличающимся от того, что, как я думал, я обычно пишу, когда добавляю форму вместе в AngularJS, но по какой-либо причине ngSubmit не работает, а ngDisabled не отключает кнопку, когда поля пусты. Я взял раздел и вложил его в новый проект, чтобы увидеть, если он просто действует из-за некоторых других зависимостей, но он все еще не работает даже после обрезки жира. Может ли кто-нибудь увидеть, что не так, это очевидно после такого количества времени, что я не увижу его сам.

Я предварительно загрузил поля формы, используя контроллер, чтобы проверить, что они говорят, интерполировал пользовательские данные в предварительных тегах, привязанных к ng-модели, так как я могу видеть, что он обновляется по мере ввода, и нет никаких ошибок ng , даже глядя на угловой плагин Chromes, он выглядит отлично. Но login() никогда не вызывается на ngSubmit, и кнопка никогда не будет ngDisabled, когда требуемые поля пустые.

усеченную версию вопроса, который до сих пор не работает:

<div ng-app="myApp"> 
    <div ng-controller="LoginController as loginCtrl"> 

     <form name="loginForm" role="form" ng-submit="loginCtrl.login()" novalidate></form> 

     <div class="form-group"> 
      <label for="username">Username</label> 
      <input type="text" class="form-control" id="username" name="username" ng-model="loginCtrl.user.username" required> 
     </div> 

     <div class="form-group"> 
      <label for="password">Password</label> 
      <input type="password" class="form-control" id="password" name="password" ng-model="loginCtrl.user.password" required> 
     </div> 

     <div class="form-group clearfix"> 
      <button type="submit" class="btn btn-primary btn-block" ng-disabled="loginForm.$invalid">Login</button> 
     </div> 

     <pre>user data = {{loginCtrl.user | json}}</pre> 

     <pre>form invalid = {{loginForm.$invalid}}</pre> <!-- always says false... but it is invalid --> 

     </form> 

    </div> 
</div> 

<script> 
(function() { 
    'use strict'; 

    angular.module('myApp', []) 

    .controller('LoginController', [function() { 

     var self = this; 
     self.user = { username: 'asdf', password: 'asdf' }; 
     self.login = function() { 
      console.log("hello world"); 
     }; 
    }]); 

})();  
</script> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 

Answer 1

убедитесь, что угловые библиотеки включены.

https://docs.angularjs.org/misc/downloading

и посмотрим на эти решения https://github.com/angular/angular.js/issues/2513

и если вы хотели бы видеть свою рабочую форму ...

<div class="col-md-10"> 
    <form class="tab-pane active form-horizontal" id="first" name="userForm" novalidate ng-submit="save()"> 
     <h2>Sign up</h2> 
     <div class="form-group" ng-class="{'has-error' : submitted && userForm.username.$invalid}"> 
      <label class="control-label col-md-3">UserName <span class="required">* </span> </label> 

      <div class="col-md-4"> 
       <input type="text" name="username" class="form-control" ng-model="user.username" required placeholder="username"/> 
      </div> 
      <p ng-show=" submitted && userForm.email.$invalid" class="help-block">Username is required.</p> 
     </div> 

     <div class="form-group" ng-class="{'has-error' : submitted && userForm.email.$invalid}"> 
      <label class="control-label col-md-3">Email <span class="required">* </span> </label> 

      <div class="col-md-4"> 
       <input type="email" name="email" class="form-control" ng-model="user.email" required placeholder="email"/> 
      </div> 
      <p ng-show=" submitted && userForm.email.$invalid" class="help-block">Email is required.</p> 
     </div> 

     <div class="form-group" ng-class="{'has-error' : submitted && userForm.password.$invalid}"> 
      <label class="control-label col-md-3">Password <span class="required">* </span> </label> 

      <div class="col-md-4"> 
       <input type="text" name="password" class="form-control" ng-model="user.password" required placeholder="1.2"/> 
      </div> 
      <p ng-show="submitted && userForm.password.$error.required" class="help-block">Password is required.</p> 
     </div> 

     <div class="form-group"> 
      <label class="control-label col-md-3">Confirm Password </label> 

      <div class="col-md-4"> 
       <input type="text" name="password_confirmation" class="form-control" ng-model="user.password_confirmation" 
         placeholder="password_confirmation"/> 
      </div> 
      <p ng-show="submitted && userForm.password_confirmation.$invalid" class="help-block">password_confirmation is required.</p> 
     </div> 


     <div class="form-group"> 
      <div class="pull-left"> 
       <a class="btn btn-default" href="/app/assets/images"> Back</a> 
       <button type="submit" class="btn btn-primary" ng-click="submitted=true">Submit</button> 
      </div> 
     </div> 


    </form> 
</div>