WTForm: FieldList与SelectField，如何渲染？

Question

我有一个订单表单，用户可以通过它来创建订单。一个订单包含多个元组，格式是 (产品类型, 数量)。产品类型应该用一个下拉框 <select> 来显示，而数量则可以用一个输入框。产品类型的选项需要动态添加，因为这些选项可能会变化。目前，我是用简单的 HTML 来实现这个功能。

我想使用 WTForm，因为它可以让我简化代码。不过，我现在遇到了一些问题：

代码：

class OrderEntryForm(Form):
  quantity = IntegerField('Quantity',
                          [validators.Required(), validators.NumberRange(min=1)])
  # we will be dynamically adding choices
  producetype = SelectField('Produce',
                            [validators.Required()],
                            choices=[])

class OrderForm(Form):
  name = TextField('Crop', [validators.Length(min=3, max=60)])
  due_date = DateField('Due Date', [validators.required()])
  order_entries = FieldList(FormField(OrderEntryForm))

我有以下几个问题：

1. 我该如何动态地向订单表单中的 order_entries 字段添加选项呢？
2. 如果我有一个订单，格式是 order = { name:hello, due_date:2014-06-18, order_entries:[ {producetype_id: 1, quantity: 2}, {producetype_id: 3, quantity: 4}] }，我该如何用正确的 OrderEntryForm 值来填充我的 OrderForm 呢？

Answer 1

在你的 OrderForm 中添加一个 SubmitField：

submit_something = SubmitField((u'Add something'))

然后在你的视图中调用它，并使用 FieldList 的 append_entry 方法：

if form.submit_something.data:
         form.order_entries.append_entry()
         return render_template('yourtemplate.html', form=form)

希望这对你有帮助！

Answer 2

对于那些被 SelectField 和 FieldList 搞晕的人，这里是我如何用 SelectField 实现 FieldList 的方法（灵感来自于 nsfyn55的回答）。这个方法可以根据 JSON 数据动态地在 /home 路由上渲染任意数量的 SelectFields。

路由 (routes.py):

@app.route('/home', methods=['POST', 'GET'])
def home():
    custom_metadata = data

    select_metadata_form_list = SelectFormList()
    select_metadata_form_list.select_entries = get_select_entries()

    context = {
        "select_metadata_form_list": select_metadata_form_list,
    }

    return render_template('home.html', **context)

表单 (forms.py):

class SelectForm(FlaskForm):
    select = SelectField("Placeholder", choices=[])


class SelectFormList(FlaskForm):
    select_entries = FieldList(FormField(SelectForm))

模板 (home.html):

{% for select_form in select_metadata_form_list.select_entries %}
    {{select_form.select.label}}: {{ select_form.select}}
{% endfor %}

辅助方法 (app.py):

def get_select_entries():
    """
    Converts custom metadata to a forms.SelectForm(), which can then be
    used by SelectFormlist() to dynamically render select items.

    :return: <forms.SelectForm object>
    """
    select_data = get_select_data_from_custom_metadata()

    select_data_labeled = get_labled_select_data(select_data=select_data)

    all_select_items = []
    for select_dict in select_data_labeled:
        for k, v in select_dict.items():
            select_id = uuid.uuid1()   # allows for multiple selects
            select_entry = SelectForm()
            select_entry.select.label = k
            select_entry.id = select_id
            select_entry.select.choices = v
            all_select_items.append(select_entry)

    return all_select_items

def get_select_data_from_custom_metadata():
    """
    [
    {"Seniority": ["Intern", "Associate", "Senior"]}
    ]
    :return: List of dictionaries containing key and list of select values
    """
    type = "select"
    select_data = []
    custom_metadata = get_custom_metadata()

    for field in custom_metadata["fields"]:
        if field["type"] == type:
            select_data.append({field["key"]: field["data_list"]})

    return select_data

'数据' (custom_metadata.json):

{
  "fields": [
    {
      "type": "text",
      "key": "Position"
    },

    {
      "type": "select",
      "key": "Seniority",
      "data_list": ["Intern", "Associate", "Senior", "Executive"]
    },
    {
      "type": "select",
      "key": "Company",
      "data_list": ["Ford", "Chevy", "Toyota"]
    },
    {
      "type": "select",
      "key": "Team",
      "data_list": ["Bucks", "Raptors", "Thunder"]
    }
  ]
}

结果:

Answer 3

我怎么才能动态地给OrderForm的order_entries字段添加选项呢？

这要看你具体是什么意思。

如果你是想在表单渲染后添加一些项目，那你需要用到DOM操作，也就是在客户端直接添加这些内容。WTForms有一种命名规则来处理表单字段的索引。简单来说，就是用这种格式命名：name="<form-field-name>-<index>"。如果你用JavaScript添加一个符合这个规则的名称，WTForms就能在后台正确处理它。

如果你是想要一个动态的选项列表，那你可以在表单实例化后遍历FieldList。你可以把choices设置为任何包含2个元素的元组的可迭代对象。在下面的例子中，我是直接赋值，但这些值也可以从存储中获取。

order_form = OrderForm()
for sub_form in order_form.order_entries:
    sub_form.producetype.choices = [('2', 'apples'), ('2', 'oranges')]

我怎么才能用正确的OrderEntryForm值填充我的OrderForm呢？

你可以直接使用obj这个关键字参数把对象绑定到表单上。WTForms足够聪明，可以根据对象的属性动态构建表单。

from wtforms import Form, IntegerField, SelectField, TextField, FieldList, FormField
from wtforms import validators
from collections import namedtuple

OrderEntry = namedtuple('OrderEntry', ['quantity', 'producetype'])
Order = namedtuple('Order', ['name', 'order_entries'])

class OrderEntryForm(Form):
  quantity = IntegerField('Quantity',
                          [validators.Required(), validators.NumberRange(min=1)])
  # we will be dynamically adding choices
  producetype = SelectField('Produce',
                            [validators.Required()],
                            choices=[
                                (1, 'carrots'),
                                (2, 'turnips'),
                            ])

class OrderForm(Form):
  name = TextField('Crop', [validators.Length(min=3, max=60)])
  order_entries = FieldList(FormField(OrderEntryForm))

# Test Print of just the OrderEntryForm
o_form = OrderEntryForm()
print o_form.producetype()

# Create a test order
order_entry_1 = OrderEntry(4, 1)
order_entry_2 = OrderEntry(2, 2)

order = Order('My First Order', [order_entry_1, order_entry_2])

order_form = OrderForm(obj=order)

print order_form.name
print order_form.order_entries

上面的例子创建了一个示例Order对象，并将其提供给obj关键字。渲染时，这将生成以下内容（没有样式）：