Angular.js - 当我输入返回 false 时提交表单

Question

我正在练习我的 angular.js 和表单验证。我想这样做，如果变量 user_valid 和 pass_valid 为 false，则当我单击提交时表单不会提交。因此，通过调用 return false; 在 angularjs 之外编写代码时，我做得非常好。 但是在 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标签中的action和method属性

编辑 看看这个小提琴：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>

您可以使用输入中的 required 属性和表单的属性 $invalid 来自动禁用或启用表单是否有效的按钮。你可以做所有类型的事情，比如patterns、max-length、min-lenght ...