Question

我有一个自定义的脆皮登录表单，它覆盖了基本的 allauth 登录表单，纯粹是为了向字段添加前置图标，而无需对所有 html 进行硬编码。表单在页面上的结构呈现良好，但样式明智，它缺少我为表单传递的自定义 css 类。下面的表单对象

from allauth.account.forms import LoginForm
from crispy_forms.bootstrap import PrependedText
from crispy_forms.helper import FormHelper
from crispy_forms.layout import HTML, Div, Field, Layout, Submit
from django import forms

from django.urls import reverse
from django.utils.safestring import mark_safe
from django.utils.translation import ugettext_lazy as _


class CustomLoginForm(LoginForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["remember_me"] = forms.BooleanField(required=False)
        self.helper = FormHelper(self)
        self.helper.form_show_labels = False
        self.helper.layout = Layout(
            Field(
                PrependedText(
                    "login",
                    mark_safe('<i class="ni ni-email-83"></i>'),
                    placeholder=_("Email"),
                    autofocus="",
                ),
                css_class="input-group input-group-merge input-group-alternative mb-3",
            ),
            Field(
                PrependedText(
                    "password",
                    mark_safe('<i class="ni ni-lock-circle-open"></i>'),
                    placeholder=_("Password"),
                    autofocus="",
                ),
                css_class="input-group input-group-merge input-group-alternative",
            ),
            HTML(
                f"""
                    <small>
                    Damn!
                    <a class="button secondaryAction mt--10"
                        href="{reverse('account_reset_password')}">
                            {_("forgot password")}
                    </a>
                    </small>
                """
            ),
            RememberMeCheckbox("remember_me"),
            Div(Submit("submit", "Log in"), css_class="text-center mt-10"),
        )

我知道表单是从这里渲染的，因为我可以看到该死的！忘记了表单中的密码文本（这不是库存标准）。在我的实际模板中：

{% load crispy_form_tags %}

和

<div class="card-body px-lg-5 py-lg-5">
    <div class="text-center text-muted mb-4">
        <small>{% trans "Or sign in with credentials" %}</small>
    </div>
    {% crispy form %}
</div>

风格明智，我可以看出页面的其余部分正在加载 css 文件。主要问题是；在检查渲染元素时，我实际上在对象中没有上述自定义 css 类。即我希望看到 "input-group input-group-merge input-group-alternative mb-3" 在其中一个 div 中，但它不在那里 :(

<div id="div_id_login" class="form-group"> 
    <div class=""> 
        <div class="input-group"> 
            <div class="input-group-prepend"> 
                <span class="input-group-text">
                    <i class="ni ni-email-83"></i>
                </span> 
           </div> 
           <input type="email" name="login" placeholder="Email" autocomplete="email" autofocus="" class="textinput textInput form-control" required="" id="id_login"> 
        </div> 
    </div> 
</div>

在我的设置文件中

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.sites",  # required by django-allauth
    "django.contrib.staticfiles",
    "corsheaders",
    "app.users.apps.UsersConfig",
    "allauth",
    "allauth.account",
    "allauth.socialaccount",
    "django_extensions",
    "allauth.socialaccount.providers.facebook",
    "allauth.socialaccount.providers.google",
    "graphene_django",
    "polymorphic",
    "crispy_forms",
    "djmoney",
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

ACCOUNT_FORMS = {
    "signup": "app.users.forms.CustomSignupForm",
    "login": "app.users.forms.CustomLoginForm"
}

有人有什么想法吗？我现在有点撞墙了。提前感谢您的时间！

Crispy Forms FormHelper 布局不推送自定义 css_class 以进行渲染

0 个答案: