Javascript 使用WTForms字段列表和Ajax从模板追加表单

我正在尝试使用 WTForms

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

下面是一个将Ajax与WTForms和结合使用的示例。它们克隆了一个现有表单，因此仅当该表单至少有一个实例时才起作用。我想删除此约束，以允许初始为空的表单

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

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

这就允许WTF提供一些好处，比如打印表单验证错误等。

---

这里的问题是，当使用SheepIt中的“模板表单”时，我不知道是否/在何处放置上述for循环。

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_field（field）%}
{{field.label}
{{字段（**kwargs）|安全}
{%if field.errors%}

{%字段中有错误。错误%}
{{error}}
{%endfor%}

{%endif%}
{%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 %}

{%macro render\u multi\u field（field，field\u name）%}
{{field_name}}
{字段%中的子字段为%1}
{{子字段（**kwargs）|安全}
删除条目
{%if subfield.errors%}
{%用于子字段中的错误。错误%}
{{error}
{%endfor%}
{%endif%}
{%endfor%}


添加条目
{%endmacro%}

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

---

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

您能分享javscript代码吗。我很难理解这一点。谢谢你hi@iodbh我正在尝试做一些类似的事情，但由于某些原因，我动态添加的条目无法检索输入的数据，可以参考你的建议，我的问题在这里，干杯！

{% 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 %}