当前位置: 首页 > 面试题库 >

使用wtforms动态添加输入字段

南门洋
2023-03-14
问题内容

我不太确定如何处理此问题。我希望我能到达那里。

例如,我在一个页面上有一张充满地址的表。这些计数是动态的(可以是5或10或任何其他计数)。我希望可以在一页上进行编辑。

我的方法是创建wtforms一个表单编辑一个地址,并乘以它在Jinja2的for loop和附加到HTML propertysnameid
loop.index0从itereation,这样我就可以提取人工数据的每一行,并把它放回我的形式,当我想评估一下。

因此,此示例的表单为:

class AdressForm(Form):
    name = TextField()

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

{% 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的字段函数指定正确的类。就像它们在许多教程中一样)

因此这是行不通的,因为您无法将name参数手动传递给field函数,因为wtformsname从初始形式的变量名称创建了html-paramter。

因此,有一种方法可以在要呈现的表单名称中添加前缀或后缀。还是这是一个XY问题,我的方法是完全错误的。

还是我自己一个人做(我真的在努力避免这种情况)


问题答案:

WTForms有一个称为的元字段FormField,另一个名为的元字段FieldList。将两者结合在一起,您将获得想要的:

class AddressEntryForm(FlaskForm):
    name = StringField()

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

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

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

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

{% 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和获取包含更新数据的词典列表。



 类似资料:
  • 问题内容: 有没有办法可以从python发送表单的(css)类?例如: 这呈现了一个简单的文本字段,但是我希望该文本字段具有的CSS类,是否可以直接从python进行? 我知道我可以直接从python 放一个,但不能放一个类。 更新:我尝试了,但没有成功,我得到了: 问题答案: WTForms不允许你在字段初始化中设置显示选项(例如类名)。但是,有几种方法可以解决此问题: 如果你所有的字段都应包含

  • 我读过许多关于动态添加字段集的博客和帖子,但它们都给出了非常复杂的答案。我要求的不是那么复杂。 我的HTML代码: 因此,用户将在字段中输入一个整数值(我正在使用javascript检查验证)。点击链接,会出现相应数量的输入字段供他输入。我想用javascript实现这一点。 我不是javascript方面的专家。我在想如何通过链接检索用户在字段中填写的整数,并显示相应数量的输入字段。

  • 我想用自动递增的id(1,2,3…等)将多个数据保存到数据库中,而不是保存在同一列中。用户可以动态添加输入字段,最后单击submit按钮,以不同的id(自动递增的id)将数据保存到数据库中。 我的js生成用户想要的输入字段 形式: 路线: 控制器: 但它只在数据库中保存一个输入字段值。任何能帮助我的人。

  • 问题内容: 有什么好方法可以克服不幸的事实,即该代码无法按预期运行: 在理想情况下,所有必填项都将带有一个小星号,表明该字段是必需的。这种解决方案是不可能的,因为CSS插入在元素内容之后,而不是元素本身之后,但是很理想。在具有数千个必填字段的站点上,我可以将星号移动到输入的前面,而只更改一行(到),也可以将其移动到标签的末尾()或标签的前面,或收纳盒上的位置等… 这不仅很重要,不仅以防万一我改变主

  • 克服此代码无法按预期工作这一不幸事实的好方法是: 在一个完美的世界中,所有必需的

  • 问题内容: 我正在尝试根据此文档http://wtforms.simplecodes.com/docs/1.0.2/specific_problems.html#dynamic-form-composition在WTForms中生成具有动态字段的表单 我有这个子窗体类,它允许用户从列表中选择要购买的物品: 购物商品将有多个类别,因此我想根据用户选择的类别生成一个动态选择字段: 但出现以下错误: 我