Question

我在登录表单中使用Django和AngularJS。在这种情况下，username采用电子邮件格式。当用户输入格式化为电子邮件地址和密码至少为8个字符的字符串时，我的登录表单按钮才会被取消禁用。但是点击登录按钮什么都不做。什么都没有。没有发出POST请求。

forms.py：

class LoginForm(AuthenticationForm):
    '''
    Form to log in a user
    '''
    error_messages= {
        "invalid_login": _("Incorrect %(username)s/password combo")
    }

    title=  "Sign in"

    username=   forms.EmailField(label=_("Email"), widget=forms.TextInput(attrs={"id":"id_login_username", "type":"email", "placeholder":"Email", "ng-model":"login.email"}))
    password=   forms.CharField(label=_("Password"), widget=forms.PasswordInput(attrs={"placeholder":"Password", "ng-model":"login.pw", "ng-minlength":settings.MIN_PW_LENGTH}))

urls.py：

urlpatterns += [url("^login-register/$", views.login_register, name="login_register"),]

views.py：

def login_register(request, template="pages/login_register.html"):
    registration_form=  RegisterForm()
    return render(request, template, {"registration_form":registration_form})

login_register.html：

{% extends "base.html" %}

{% load i18n mezzanine_tags staticfiles %}

{% block meta_title %}{% trans "Register or log in" %}{% endblock %}
{% block title %}{% trans "Register or log in" %}{% endblock %}
{% block extra_head %}
    <meta name="robots" content="noindex">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    {% compress js %}
        <script src="{% static "js/login-register.js" %}"></script>
    {% endcompress %}
{% endblock %}

{% block main %}
  <div id="login-register-wrapper" ng-app="app" ng-controller="Ctrl">
    <form id="login-form" name="loginForm" method="post">
        {% csrf_token %}
        {% if login_form.non_field_errors %}
            <p class="text-danger" role="alert">{{ login_form.non_field_errors.as_text|cut:"* "|escape }}</p>
        {% endif %}                 
        {% for field in login_form %}
            <p>{{ field }}</p>
            {% if field.errors %}
                <small class="text-danger" role="alert">{{ field.errors.as_text|cut:"* "|escape }}</small>
            {% endif %}                     
        {% endfor %}
        <button id="login-button" class="btn btn-primary" type="submit" ng-disabled="!loginForm.username.$valid || !login.pw">Log in</button>
    </form>
  </div>
{% endblock main %}

login-register.js：

var app=    angular.module("app",[]);
app.config(function($interpolateProvider){
    $interpolateProvider.startSymbol("[[[");
    $interpolateProvider.endSymbol("]]]");
});

app.controller("Ctrl",function($scope, $rootScope){

});

为什么在我正确填写“电子邮件”和“密码”字段后单击登录按钮时表单不提交？当我从文件中删除所有AngularJS时，为什么按钮成功提交？

更新：这是form HTML在浏览器中的样子。

<form method="post" name="loginForm" class="ng-invalid ng-dirty ng-valid-email ng-valid-parse ng-valid-required ng-invalid-minlength ng-submitted">
<input type="hidden" name="csrfmiddlewaretoken" value="aHUiUqU1EDmTcqgr5SpyELLnR8dsNh6mTExN7FqmiwX1ykPYlZBcrOBWjRA9YlBj">       <p><input id="id_login_username" name="username" ng-model="login.email" placeholder="Email" type="email" required="" class="ng-not-empty ng-dirty ng-valid-required ng-valid ng-valid-email ng-touched"></p>    
    <p><input id="id_password" name="password" ng-minlength="8" ng-model="login.pw" placeholder="Password" type="password" required="" class="ng-invalid ng-not-empty ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched"></p>                   
    <button class="btn btn-primary" type="submit">Log in</button>
</form>

Answer 1

表格数据不会去任何地方，除非你告诉它去哪里。您的表单未提交，因为它缺少操作或ng-submit。

action属性是一个表单处理程序，它放在表单元素上，例如

<form id="login-form" name="loginForm" method="post" action="/your-endpoint">

但是角度方式是指定ng-submit函数。

<form id="login-form" name="loginForm" method="post" ng-submit="foo()">


$scope.foo = function() {
 // ...
 // do whatever extra logic you need to, then
 //   $http.post('./your-endpoint', formdata)
}

登录按钮不会触发

1 个答案: