javascript - 使用 WTForms FieldList 和 Ajax 从模板附加表单

Question

我正在尝试创建一个动态表单(在 python Flask 应用程序中)使用WT 表格。

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

这是一个 example of a WTF solution将 Ajax 与 WTForms 和 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 通过宏中的按钮添加/删除的。