使用 WTForms FieldList 和 Ajax 从模板追加表单

Question

我正在尝试使用创建动态表单（在 python Flask 应用程序中） WTForms。

WTForms 包含一个用于字段列表的 FieldList 字段。我想用它来制作一个用户可以添加或删除项目的表单，例如指定不同的电话号码。

这是一个使用 Ajax 和 WTForms 的 example of a WTF solution 和 related question。这些克隆了一个现有的表单，因此只有在至少已经存在一个表单实例的情况下才有效。我想删除此约束以允许最初为空的表单。

我想使用javascript form plugin called SheepIt 来动态添加/删除允许这样做的小部件，使用 html 中的“表单模板”。

问题是如何替换“表单模板”中的自定义html如：

<input id="phoneForm_#index#_number"
name="user[phones][#index#][number]" type="text"

带有 WTF 表单字段，例如：

{% for phone in form.phones %}
  {{ phone.number }}
{% endfor %}

允许 WTF 的好处，例如打印表单验证错误等。 这里的问题是，当使用 SheepIt 中的“模板表单”时，我不知道是否/在哪里放置上述 for 循环。

Answer 1

Flask 的文档建议使用以下 jinja2 宏来呈现 WTForms 字段：

{% macro render_field(field) %}
  <dt>{{ field.label }}
  <dd>{{ field(**kwargs)|safe }}
  {% if field.errors %}
    <ul class=errors>
    {% for error in field.errors %}
      <li>{{ error }}</li>
    {% endfor %}
    </ul>
  {% endif %}
  </dd>
{% endmacro %}

为了在字段列表中呈现子字段，我使用了这个宏的一个稍微不同的版本：

{% macro render_multi_field(field,field_name) %}
    <div class="form-group">
        {{ field_name }}
        {% for subfield in field %}
        <div class="base_class{% if subfield.errors %} error_class{% endif %}" id="{{subfield.name}}-group">
            {{ subfield(**kwargs)|safe }}
            <button data-field="{{ subfield.name }}-group">Remove Entry</button>
        </div>
        {% if subfield.errors %}
             {% for error in subfield.errors %}
                <p class="error_class">{{ error }}</p>
            {% endfor %}
        {% endif %}

        {% endfor %}
        <br/>
        <button type="button">Add entry</button>
    </div>
{% endmacro %}

我使用此宏将具有 0 的字段呈现到任意数量的条目。它允许错误呈现、填充默认值以及您可以使用 WTForms 执行的任何其他操作。

在我的例子中，小部件是通过 javascript 通过宏中的按钮添加/删除的。