如何在超文本标记语言页面中访问wagtail FreeForm的每个字段？

Question

我已经通过扩展下面给出的WagtailFormBlock创建了wagtail FreeForm。我可以使用wagtail admin interface创建不同的表单。

文件名：blocks.py

from wagtailformblocks.blocks import WagtailFormBlock

class MyForm(WagtailFormBlock):

    class Meta:
        app_label = 'demo'

这是models.py文件，我在其中创建了页面并将表单分配给此页面。

文件名：models.py

from wagtail.wagtailcore.models import Page
from wagtailformblocks.models import BaseForm
from wagtail.wagtailcore.fields import StreamField


class FormType(BaseForm):

    class Meta:
        verbose_name = "Form Type"

class ImagePage(Page):
    template = 'wagtail_demo/image_page.html'

    content = StreamField([
        ('my_forms', MyForm()),
    ])

    content_panels = Page.content_panels + [
        StreamFieldPanel('content'),
    ]

这是我要在其中呈现表单域的image_page.html页面。

文件名：image_page.html

{% load wagtailcore_tags %}
{% with blocks=self.content %}
    {% for block in blocks %}
        {{ block }}
    {% endfor %}
{% endwith %}

它显示与此页面相关联的表单的所有字段。我想单独访问关联表单的每个字段，因为有时我需要使用(e.g.: field name etc.)在submit按钮之前添加字段。我该怎么做呢？

Answer 1

为了更好地控制表单块的呈现方式，您可以轻松地覆盖Block上Meta中的template属性。

首先，使用meta中的模板属性调整您的自定义WagtailFormBlock类。我将这个类从MyForm重命名为CustomFormBlock，因为这样更容易理解这个类是一个流字段，而不是一个表单。

# file: blocks.py
class CustomFormBlock(WagtailFormBlock):

    class Meta:
        # template variable has been overridden...
        template = 'demo_app/wagtailformblocks/form_block.html'
        app_label = 'demo'

然后，在/templates/demo_app/wagtailformblocks/form_block.html中创建模板。可以从从WagtailFormBlocks codebase中为此块的默认样板复制和粘贴开始。

{% load static %}

<script src="{% static 'wagtailformblocks/js/formhandler.js' %}"></script>

<form action="{{ action_url }}" id="wagtailformblock_{{ form_id }}">
    {% csrf_token %}
    {% for field in form %}
        <div class="fieldWrapper">
            <strong>Custom Per Field Content for `{{ field.name }}`</strong>
            {{ field.errors }}
            {{ field.label_tag }} {{ field }}
            {% if field.help_text %}
            <p class="help">{{ field.help_text|safe }}</p>
            {% endif %}
        </div>
    {% endfor %}
    <input type="submit">
</form>

这就是您需要做的全部工作，现在每当您使用CustomFormBlock将表单链接到streamfield内容时，它将使用您提供的模板自动呈现。

您可以在Django docs：working with form templates中看到更多关于如何以自定义方式呈现表单的文档。

备注

• 这是一个特定于Wagtail Form Blocks library.
• WagtailFormBlocks的问题，它提供了一个名为WagtailFormBlock的自定义StreamBlock，它提供了使用同一个库创建的表单的可选下拉列表。