Angularjs 登录按钮赢得'；t火

我在登录表单中使用Django和AngularJS。在这种情况下，

用户名

采用电子邮件格式。只有当用户输入格式为电子邮件地址的字符串和至少八个字符的密码时，我的登录表单按钮才会被取消禁用。但是点击登录按钮没有任何作用。什么都不会发生。没有提出邮寄要求

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}))

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

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

url.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}))

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

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

views.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}))

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

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

login\u 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 %}

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

更新：下面是

表单

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>

登录

除非您告诉表单数据去哪里，否则表单数据不会去任何地方。您的表单未提交，因为它缺少action或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)
}

$scope.foo=函数（）{
// ...
//那么，做任何你需要的额外逻辑
//$http.post（'./您的端点'，formdata）
}

除非您告诉表单数据去哪里，否则表单数据不会去任何地方。您的表单未提交，因为它缺少action或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)
}

$scope.foo=函数（）{
// ...
//那么，做任何你需要的额外逻辑
//$http.post（'./您的端点'，formdata）
}