如何在 HTML 页面中访问 wagtail FreeForm 的每个字段？答案

【问题标题】：How to access each field of wagtail FreeForm in HTML pages?如何在 HTML 页面中访问 wagtail FreeForm 的每个字段？
【发布时间】：2018-01-08 08:13:13
【问题描述】：

我通过扩展下面给出的 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.)，因为有时我需要使用 javascript 在提交按钮之前添加字段。我该怎么做？

【问题讨论】：

标签： python django wagtail wagtail-streamfield

【解决方案1】：

要更好地控制表单块的呈现方式，您可以轻松地覆盖块上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 将表单链接到流域内容时，它都会使用您提供的模板自动呈现。

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

注意事项

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

【讨论】：