Question

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

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

以下是使用带有WTForms和example of a WTF solution的Ajax的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好东西，例如打印表单验证错误等。这里的问题是我不知道在使用“模板形式”时是否/在哪里放置上面的for循环，如在SheepIt中所做的那样。

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通过宏中的按钮添加/删除小部件。

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

1 个答案: