模型表單上的Django Bootstrap input-group-addon無需分隔字段

Question

我目前正在以以下方式呈現Django表單：

<form action="/student/" method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit" value="Launch" class="btn btn-primary"/>
</form>

我有多個不同類型的字段，對每個字段應用了不同的內容，例如驗證器和幫助文本。

我有兩個字段想要添加引導范圍。 我想在前面加上一個磅符號的一個money字段，以及一個我想在上面附加一個百分比符號的百分比字段，我知道可以使用以下引導程序來做到這一點：

此輸入字段。

<div class="input-group">
  <span class="input-group-addon">$</span>
    <input type="text" class="form-control" placeholder="Price"/>
</div>

但是要在我的Django模板中執行此操作，將需要我將表單分解為特定的字段並創建特定於字段的html。 如對此問題的解決方案提出。

我正在尋找的是一種在模型或模型表單中指定屬性或類的方法，該屬性或類僅適用於特定字段，但將如上呈現而不破壞表單。

謝謝。

信息：Bootstrap-4 Django-2.0.2 Python-3.6.1

Answer 1

您需要從基本窗口小部件繼承。 如果使用下面的模板，則可以輕松創建自定義引導程序組。

在forms.py中

from django import forms
from django.forms import Widget
from django.utils.safestring import mark_safe

class PrependWidget(Widget):
    """ Widget that prepend boostrap-style span with data to specified base widget """

    def __init__(self, base_widget, data, *args, **kwargs):
        u"""Initialise widget and get base instance"""
        super(PrependWidget, self).__init__(*args, **kwargs)
        self.base_widget = base_widget(*args, **kwargs)
        self.data = data

    def render(self, name, value, attrs=None):
        u"""Render base widget and add bootstrap spans"""
        field = self.base_widget.render(name, value, attrs)
        return mark_safe((
            u'<div class="input-group mb-3">'
            u'  <div class="input-group-prepend">'
            u'    <span class="input-group-text" id="basic-addon1">%(data)s</span>'
            u'  </div>'
            u'  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">'
            u'</div>'
        ) % {'field': field, 'data': self.data})

class MyForm(forms.Form):
    example_field = forms.CharField(max_length=255, min_length=1, label='', required=False,
                              widget=PrependWidget(base_widget=forms.TextInput, data='$'))

資源

Answer 2

在表單中，您可以執行以下操作：

from django.forms import TextInput, Textarea

class MyForm(modelForm):
    class Meta:
        widgets = {
            "name": TextInput({"class": "form-control"}),
            "comment": Textarea({"data-validation": "validate"}),
        }

您可以在此鏈接中閱讀有關小部件的信息，並了解添加自定義屬性的不同方法，這是有關小部件的django文檔： https : //docs.djangoproject.com/en/2.0/ref/forms/widgets/