微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我有一个自定义的脆皮登录表单,它覆盖了基本的 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"),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"
}

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。