创建自定义 Flask WTForms 小部件

Question

我有一个自定义 Flask WTForm，我想在其中包含该表单的一部分，其中包含根据 table 中的条目数创建的按钮类型输入列表，但是让他们以我想要的方式出现并通过表单验证一直很困难。我对该字段外观的目标是让它显示为 Inline Button Group with a Checkbox type input。下面是我的路线方法的一个例子。

@bp.route('/new_channel', methods=['GET', 'POST'])
def new_channel():

    # Pre-populate the NewChannelForm 
    newChannelForm = NewChannelForm()
    newChannelForm.required_test_equipment.choices =  [(equip.id, equip.name) for equip in TestEquipmentType.query.order_by('name')]
    test_equipment_types = TestEquipmentType.query.all()

return render_template('new_channel.html', title='Add New Channel', form=newChannelForm,
                            test_equipment_types=test_equipment_types)

我尝试使用 FieldList 和 FormField 包含自定义表单和 BooleanField 并设法获得正确的样式，但表单验证无效。通过进一步调查，BooleanField 与 FieldList.

不兼容

我的下一步是使用 MultiSelectField 的 Flask WTForm 示例，其中包含字段的自定义小部件和选项的自定义小部件。默认如下图：

class MultiCheckboxField(SelectMultipleField):
    """
    A multiple-select, except displays a list of checkboxes.

    Iterating the field will produce subfields, allowing custom rendering of
    the enclosed checkbox fields.
    """
    widget = widgets.ListWidget(prefix_label=False)
    option_widget = widgets.CheckboxInput()

我的目标是修改它以制作一个名为 InLineButtonGroupWidget 的自定义小部件，它将使用样式来设置内联按钮列表，就像我之前包含的图片一样。此外，我希望创建一个名为 CheckboxButtonInput 的自定义 option_widget 来获取每个单独按钮的样式，我可以在其中将信息传递到该字段。这就是我的目标：

InLineButtonGroupWidget:

<div class="btn-group-toggle" role="group" data-toggle="buttons"></div>

CheckboxButtonInput:

<label class="btn btn-outline-info" for="check-1">Calibrator
     <input type="checkbox" id="check-1">
</label>

关于如何创建自定义小部件的文档有点让我头疼，并没有最好地解释它，所以我正在寻找一些

编辑： 使用了 Andrew Clark 的建议，这是我的最终实现：

routes.py

@bp.route('/new_channel', methods=['GET', 'POST'])
def new_channel():

    class NewChannelForm(FlaskForm):
        pass
    
    test_equipment_types = TestEquipmentType.query.all()
    for test_equipment_type in test_equipment_types:
        # Create field(s) for each query result
        setattr(NewChannelForm, f'checkbox_{test_equipment_type.name}', BooleanField(label=test_equipment_type.name, id=f'checkbox-{test_equipment_type.id}'))

    newChannelForm = NewChannelForm()

    if newChannelForm.validate_on_submit():
        print('Form has been validated')

        for test_equipment_type in test_equipment_types:
            if newChannelForm.data[f'checkbox_{test_equipment_type.name}']:
                channel.add_test_equipment_type(test_equipment_type)
        return redirect(url_for('main.index'))    

    print(newChannelForm.errors.items())

    return render_template('new_channel.html', title='Add New Channel', form=newChannelForm, units_dict=ENG_UNITS,
                            test_equipment_types=test_equipment_types)

new_channel.html

    <!-- Test Equipment Selection -->
        <div class="row">  
            <legend>Test Equipment Selection:</legend>           
            <div class="col-md-12">
                <div class="btn-group-toggle mb-3" role="group" data-toggle="buttons">
                    {% for test_equipment_type in test_equipment_types %}
                    <label class="btn btn-outline-info" for="checkbox-{{ test_equipment_type.id }}">
                        {{ test_equipment_type.name }}
                        {{ form['checkbox_{}'.format(test_equipment_type.name)] }}
                    </label>                    
                    {% endfor %}
                </div>
            </div>
        </div>

Answer 1

我通常会像这样处理表单构建：

def buildNewChannelForm():
    class NewChannelForm(FlaskForm):
        # put any non dynamic fields here
        pass

    test_equipment_types = TestEquipmentType.query.all()
    for test_equipment_object in test_equipment_types:
        # create field(s) for each query result
        setattr(NewChannelForm, f'field_name_{test_equipment_object.id}', SelectField(label='label name', choices=[(equip.id, equip.name) for equip in TestEquipmentType.query.order_by('name')]))

    return NewChannelForm()

编辑 1：

我不确定是否有更好的方法来做，但我通常会这样做来处理数据提交

def buildNewChannelForm():
    new_channel_form_variable_list = []
    class NewChannelForm(FlaskForm):
        # put any non dynamic fields here
        pass

    test_equipment_types = TestEquipmentType.query.all()
    for test_equipment_object in test_equipment_types:
        # create field(s) for each query result
        setattr(NewChannelForm, f'field_name_{test_equipment_object.id}', SelectField(label='label name', choices=[(equip.id, equip.name) for equip in TestEquipmentType.query.order_by('name')]))

        # append variable name
        new_channel_form_variable_list.append(f'field_name_{test_equipment_object.id}')

    return NewChannelForm(), new_channel_form_variable_list

然后您可以使用您的变量列表呈现您的表单，只需包含在您的 render_template 语句中

{% for variable_name in new_channel_form_variable_list %}
    {{ form[variable_name] }}
{% endfor %}

然后在路由中提交表单时，它只是一个字典。所以你可以这样做

result_dictionary = form.data

# either loop through your variable list or handle each one individually
for variable_name in new_channel_form_variable_list:
    print(f'variable name: {variable_name}, value: {result_dictionary[variable_name]}')

创建自定义 Flask WTForms 小部件

Creating Custom Flask WTForms Widgets

python

forms

widget

flask

wtforms

编辑 1：

我不确定是否有更好的方法来做，但我通常会这样做来处理数据提交

然后您可以使用您的变量列表呈现您的表单，只需包含在您的 render_template 语句中

然后在路由中提交表单时，它只是一个字典。所以你可以这样做