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

Question

我正在练习 angular.js 和表单验证。我想这样做，如果变量 user_valid 和 pass_valid 为假，则在我单击提交时不会提交表单。因此，通过调用 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~。我不知道它为什么要提交。 controller中的其余函数与这个函数没有任何关系，所以我排除了。

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

移除表单标签中的 action 和 method 属性

编辑看看这个 fiddle：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 ...

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

Angular.js - Form submits when i enter return false

forms

submit

angularjs