Question

我正在尝试自定义Django表单，以便与Bootstrap 4，自定义html布局以及FormModel定义上的每个字段类或ID名称一起使用

我有以下html

{% for hidden_field in form.hidden_fields %}
    {{ hidden_field }}
{% endfor %}

{% if form.non_field_errors %}
    <div class="alert alert-danger" role="alert">
        {% for error in form.non_field_errors %}
            {{ error }}
        {% endfor %}
    </div>
{% endif %}

{% for field in form.visible_fields %}
    <div class="form-group">
        {{ field.label_tag }}
        {% if form.is_bound %}
            {% if field.errors %}
                {% render_field field class="form-control is-invalid" %}
                {% for error in field.errors %}
                    <div class="invalid-feedback">
                        {{ error }}
                    </div>
                {% endfor %}
            {% else %}
                {% render_field field class="form-control is-valid" %}
            {% endif %}
        {% else %}
            {% render_field field class="form-control" %}
        {% endif %}

        {% if field.help_text %}
            <small class="form-text text-muted">{{ field.help_text }}</small>
        {% endif %}
    </div>
{% endfor %}

以及以下形式定义：

class DocumentForm(forms.ModelForm):
    field1 = PartLookupField(required=True, widget=forms.TextInput(attrs={'class': 'field1-choice-ajax'}))
    field2 = forms.CharField(required=True, widget=forms.TextInput(attrs={'id': 'field2-field'}))
    form_lines = forms.CharField(widget=forms.HiddenInput())

    class Meta:
        model = Document
        fields = ("field1", "field2", "form_lines")

因此，从本质上讲，我需要从模型的小部件中获取id或类的每个字段定义，并将其与模板中定义的form-control或is / valid / invalid类的模板结合起来。

我已经尝试过这条路

How to concatenate strings in django templates?

但是似乎最终会陷入一片混乱。

本质上，如何合并模板定义的属性和每个字段定义的属性？对于模型中指定的字段，我需要以class =“ form-control field1-choice-ajax”结尾（对于有效/无效状态，还要使用正确的额外类名）。

以前我使用的是bootstrap4表单库，但现在需要完全控制：

{% csrf_token %}
{% bootstrap_form form %}

Answer 1

我创建了自己的模板过滤器，以便将类属性添加到现有表单字段中：

@register.filter
def add_class(field, css):
    """Add a class to a field in a template.

    Example:
        > {{ form.my_field|add_class:"required" }}
        <input id="my_field_id" name="my_field" class="required" type="text">

    Args:
        field: this should be a form field, of type ``BoundField``
        css: this should be a string with one or more class names separated by spaces
    """
    class_old = field.field.widget.attrs.get('class', None)
    class_new = class_old + ' ' + css if class_old else css
    return field.as_widget(attrs={'class': class_new})

现在，我可以在模板中执行此操作：

{{ field|add_class:"is-valid" }}

Answer 2

使用Widget Tweaks。

它允许您执行以下操作：

{{ field|add_class:'form-control' }}

如何使用django小部件调整并结合模板类字符串和小部件attr属性字符串名称

2 个答案: