Angular.js - 私がfalseを返すとフォームが送信されます

Question

私はangular.jsとフォーム検証を練習しています。変数user_validとpass_validがfalseの場合、submitをクリックするとフォームが送信されないようにしたいと思います。を呼び出すことで、anglejsの外部にコードを書くときにこうして完全にうまくいく。 しかしangular.jsでの作業、およびng-submit='loginVal()'を挿入して、私のコントローラ内のタイプ： `

logApp.controller('logForm', function($scope, $http){ 
    user_valid = false; 
    pass_valid = false; 

    $scope.loginVal = function(){ 
     if (user_valid == false && pass_valid == false){ 
      return false; 
      console.log('Submit Stopped'); 
     } 
    }` 

    ... 

}); 

フォームはまだ提出し、それがコンソールNavigated to ~form-action url~で示しています。私はそれがなぜ提出しているのかわかりません。コントローラの残りの関数はこの関数に何も関係していないので、除外します。

HTML：

<form name='login' method="post" action="" ng-submit='loginVal()'> 
     {% csrf_token %} 
      <!-- LOGIN FORM --> 
      <table id='show-table'> 
       <tr> 
        <td width='20%'>Username</td> 
        <td width="80%"> 
         <div class='col-md-12' id='userField'> 
          <input name='name' type="text" ng-model='username' ng-change='checkName()'/> 
          <div id='success'></div> 
          <div id='failure'></div> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td>Password</td> 
        <td> 
         <div class='col-md-12'> 
          <input name="pwd" type="password" ng-model='password' /> 
         </div> 
        </td> 
       </tr> 
        <td></td> 
        <td><input type="submit" value="Login" id='loginSubmit' disabled /></td> 
       </tr> 
      </table> 

     </form> 

Answer 1

アクションを削除し、この方法は、formタグでこのフィドルで

EDIT ルック属性：https://jsfiddle.net/80Laf822/1/

<div ng-controller="FormController"> 
    <form name='loginForm' method="post" action="" ng-submit='loginVal()'> 
    <!-- LOGIN FORM --> 
    <table id='show-table'> 
     <tr> 
     <td width='20%'>Username</td> 
     <td width="80%"> 
      <div class='col-md-12' id='userField'> 
      <input name='name' type="text" ng-model='username' required/> 
      <div id='success'></div> 
      <div id='failure'></div> 
      </div> 
     </td> 
     </tr> 
     <tr> 
     <td>Password</td> 
     <td> 
      <div class='col-md-12'> 
      <input name="pwd" type="password" ng-model='password' required/> 
      </div> 
     </td> 
     </tr> 
     <tr> 
     <td></td> 
     <td> 
      <input type="submit" value="Login" id='loginSubmit' ng-disabled="loginForm.$invalid" /> 
     </td> 
     </tr> 
    </table> 

    </form> 
</div> 

をあなたはを必要を使用することができます入力の属性とフォームの$ invalidプロパティを自動的に無効にするか無効にするフォームが有効であるかどうかを確認します。 patterns、max-length、min-lenght ...