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

删除表单标记

中的操作和方法属性

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 ...

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

1 个答案: