如何根据用户输入的selectfield在表单中动态创建字段？

Question

如何根据用户在选择字段上的输入生成表单域？

class PracticeForm(FlaskForm):
    number_of_fields = SelectField(u'How many input fields?', choices=[(2, '2'), (3, '3'), (4, '4'), (5, '5'), (6, '6')])

    '''
    dynamically create input fields based on user input of "number_of_fields" here

    fields = number_of_fields (ranging from 2-6) **** StringFields with same attributes
    '''

    submit = SubmitField('Submit')   

在我的routes.py中，我想将字段保存到列表中：

@app.route("/practice", methods=['GET', 'POST'])
def practice():

    practiceform = PracticeForm()
    user_list = practiceform.fields.data
    if practiceform.validate_on_submit():
        return redirect(url_for('success_page', list=user_list))

我应该如何格式化我的表单，如何在jinja2中格式化我的html页面，以便它根据SelectField中的数字显示SelectField和输入字符串域的数量？

Answer 1

从本质上讲，您需要依靠jQuery/javascript来实现这一点--但这里有一个粗略的示例可以让您上手：

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import FieldList, StringField, SelectField

app = Flask(__name__)
app.secret_key = 'TEST'


class PracticeForm(FlaskForm):
    min_choices, max_choices = 2, 6
    choices = [(x, str(x)) for x in range(min_choices, max_choices)]
    number_of_fields = SelectField(u'How many input fields?', choices=choices, coerce=int)
    data_field = FieldList(StringField('Data'), min_entries=min_choices, max_entries=max_choices)


@app.route('/', methods=['POST', 'GET'])
def example():
    form = PracticeForm()
    if form.validate_on_submit():
        print(form.data_field.data)
        print(form.number_of_fields.data)
    else:
        print(form.errors)

    return render_template('example.html', form=form)


if __name__ == '__main__':
    app.run(debug=True)

神奇之处在于FieldList--现在验证器将为该StringField接受多个条目(在最小值和最大值之间)，并且可以很好地进行验证。

现在，您的诀窍是使用jQuery读取SelectField的值--默认情况下将显示两个值(因为它是最小值)，因此只需查看代码，您只需观察SelectField值是否发生变化，然后执行一些操作。

例如，如果SelectField更改为3，则需要插入：

<li>
    <label for="data_field-2">Data</label>
    <input id="data_field-2" name="data_field-2" type="text" value="">
</li>

这里是所需的jQuery的一个非常粗糙的过程，它只是擦除<ul>并根据所选字段的数量重新构建它。

<form method="post" action="#">
    {{ form.hidden_tag() }}
    {{ form.number_of_fields }}
    {{ form.data_field }}

    <input type="submit"/>

</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
    function range(start, end) {
        return Array(end - start).fill().map((_, idx) => start + idx)
    }

    $('#number_of_fields').on('change', function() {
        $('#data_field').empty();
        range(0, (this.value * 1)).forEach(function(element) {
            const reference = element;
            $('#data_field').append(
              '<li>' +
                '<label for="data_field-'+ reference + '">Data</label> ' +
                '<input id="data_field-'+reference+'" name="data_field-'+reference+'" type="text" value="">' +
                '</li>'
            );
        });
    });
</script>