使用 wtforms 动态添加输入字段 [英] Add input fields dynamically with wtforms

问题描述

我不太确定如何处理这个问题.我希望我能到那里.

I'm not quite sure how approach this matter. I hope i get there.

例如，我在页面上有一个充满地址的表格.这些计数是动态的(可以是 5 或 10 或任何其他计数).我希望能够在一页上编辑它们.

For example I have a table full of addresses on a page. The count of these are dynamic (could be 5 or 10 or any other count). And I want the possibility to edit them on one page.

我的方法是创建一个带有 wtforms 的表单来编辑一个地址并乘以它在 jinja2 for 循环 中并附加到 html 属性 name 和 idloop.index0 来自迭代，所以我可以手动提取每一行数据并在我想评估时将其放回我的表格中.

My approach was to create a Form with wtforms to edit one address and to multiply it in a jinja2 for loop and append to the html propertys name and id the loop.index0 from the itereation, so i can extract each row of data manually and put it back in my form, when I want to evaluate it.

所以这个例子的表单是:

So the Form for this example would be:

class AdressForm(Form):
    name = TextField()

所以现在我的模板方法如下所示(分解为一个输入字段):

so now my template aproach looks like the following (break down to one input field):

{% for address in addresses %}
    {{ forms.render_field(addressform.name, id = "name_" ~ loop.index0, 
                          name = "name_" ~ loop.index0, value = address.name) }}
{% endfor %}

(forms.render_field 只是一个宏，用于为 wtforms 的字段函数指定正确的类.就像它们在许多教程中使用的那样)

(forms.render_field is just a macro to specify the right classes to the field function of wtforms. like they use in many tutorials)

所以这是行不通的，因为您不能手动将 name 参数传递给 field 函数，因为 wtforms 从变量名创建 name html-paramter初始表格.

So this is not working, since you can't pass the name parameter manually to the field function, since wtforms create the name html-paramter from the variblename of the intial Form.

那么有没有办法为我要呈现的表单的名称添加前缀或后缀.或者这是一个 XY 问题而我的方法完全错误.

So is there a way to add a prefix or postfix to the name of a form I want to render. Or is this a XY-Problem and my approach is totaly wrong.

或者我自己做这一切(我真的尽量避免这种情况)

or have I do it all plain by myself (I really try to avoid this)

推荐答案

WTForms 有一个名为 FormField 和另一个名为 FieldList.这两个结合在一起会得到你想要的:

WTForms has a meta-field called FormField and another meta-field called FieldList. These two combined together will get you what you want:

class AddressEntryForm(FlaskForm):
    name = StringField()

class AddressesForm(FlaskForm):
    """A form for one or more addresses"""
    addresses = FieldList(FormField(AddressEntryForm), min_entries=1)

要在 AddressesForm 中创建条目，只需使用字典列表:

To create entries in the AddressesForm, simply use a list of dictionaries:

user_addresses = [{"name": "First Address"},
                  {"name": "Second Address"}]
form = AddressesForm(addresses=user_addresses)
return render_template("edit.html", form=form)

然后，在您的模板中，只需循环遍历子表单:

Then, in your template, simply loop over the sub-forms:

{% from 'your_form_template.jinja' import forms %}
{% for address_entry_form in form.addresses %}
    {{ address_entry_form.hidden_tag() }}
    {# Flask-WTF needs `hidden_tag()` so CSRF works for each form #}
    {{ forms.render_field(address_entry_form.name) }}
{% endfor %}

WTForms 将自动正确地为名称和 ID 加上前缀，因此当您发回数据时，您将能够获得 form.addresses.data 并返回包含更新的字典列表数据.

WTForms will automatically prefix the names and the IDs correctly, so when you post the data back you will be able to just get form.addresses.data and get back a list of dictionaries with the updated data.

这篇关于使用 wtforms 动态添加输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！