带有切换开关元素的 Django Crispy Form

Question

我正在使用 Crispy Forms 和布局助手来生成我的输入表单。我想在表单中添加一个切换开关。

想要的结果：

我得到了什么：

forms.py：

class RequestForm(forms.ModelForm):
on_prem = forms.CharField(widget=forms.CheckboxInput(attrs={"class": "slider form-control"}))

class Meta:
    model = Request
    fields = ['on_prem']

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.helper = FormHelper(self)
    self.helper.layout = Layout(
        Div(
            Div(Field('on_prem'), css_class='col-md-3', ),
            css_class='row',
        ),
    )

models.py：

class Request(models.Model):        
on_prem = models.BooleanField(default=False)

form.html

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {% crispy form %}
    <button type="submit" class="d-block btn mt-4 w-50 mx-auto">
        Save Request 
    </button>
</form>

我在Bootstrap文档中看到我想要的切换开关效果是通过嵌套CSS类实现的，我不确定如何通过表单助手来实现这一点。任何帮助将不胜感激。

Answer 1

仅使用“Field”即可减少代码行数：

self.helper.layout = Layout(
    Field('notify_faculty_field', css_class="form-check-input", wrapper_class="form-check form-switch"),
)

Answer 2

我设法通过在帮助器中使用 HTML 块来实现这一点。

表格.py

class RequestForm(forms.ModelForm):
    on_prem = forms.CharField(widget=forms.CheckboxInput(attrs={"class": "slider form-control"}))

class Meta:
    model = Request
    fields = ['on_prem']

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.helper = FormHelper(self)
    self.helper.layout = Layout(
    Div(
        Div(
            HTML('<label class="form-check-label" for="on_prem">On Prem</label>'),
            HTML('<div class="form-switch">'),
            Field('on_prem'),
            HTML('</div>'),css_class='col-md-3',),
            css_class='row',
        ),
    )

Answer 3

如果使用 django-crispy-forms 的 Bootstrap5 模板包

crispy-bootstrap5

，您可以使用

Switch

输入类型：

from crispy_bootstrap5.bootstrap5 import Switch

... Layout(Switch("is_company"))

参考：https://github.com/django-crispy-forms/crispy-bootstrap5?tab=readme-ov-file#whats-new