使用数据填充 WTForms FormField FieldList 导致字段中的 HTML [英] Filling WTForms FormField FieldList with data results in HTML in fields

问题描述

我有一个 Flask 应用程序，我可以通过上传一个 CSV 文件来填充表单数据，然后读取该文件.我想用从 CSV 读取的数据填充 FieldList.但是，当我尝试填充数据时，它会将原始 HTML 输入到 TextFields 中，而不仅仅是我想要的值.我做错了什么?

app.py

from flask import Flask, render_template, request, url_for从flask.ext.wtf 导入表单从 wtforms 导入 StringField、FieldList、FormField、SelectField从 wtforms.validators 导入 DataRequired从 werkzeug.datastructures 导入 MultiDictapp = Flask(__name__)app.config['SECRET_KEY']='asdfjlkghdsf'# 通常从上传的文件中读取学生数据，但在本演示中我们使用虚拟数据student_info=[("123","Bob Jones"),("234","Peter Johnson"),("345","Carly Everett"),(456"、约瑟芬·埃奇伍德")、(567"、帕特·怀特")、(678"、杰西·布莱克")]类 FileUploadForm(Form):经过类 StudentForm(Form):student_id = StringField('Student ID', validators = [DataRequired()])student_name = StringField('Student Name', validators = [DataRequired()])类 AddClassForm(Form):name = StringField('classname', validators=[DataRequired()])day = SelectField('上课日',选择=[(1，星期一")，(2，星期二")，(3，星期三")，(4，星期四")，(5，星期五")]，强制=整数)student = FieldList(FormField(StudentForm), min_entries = 5) # 默认显示至少 5 个空白字段@app.route('/', methods=['GET', 'POST'])定义添加类():文件格式 = FileUploadForm()classform = AddClassForm()# 检查哪个提交"按钮被调用以验证正确的表单如果 request.form 和 classform.validate_on_submit() 中的addclass":# 将类添加到数据库 - 与此示例无关.返回重定向(url_for('addclass'))如果 request.form 和 fileform.validate_on_submit() 中的上传":# 从帖子中获取数据文件 - 与此示例无关.# 通过使用从文件中读取的值填充类来覆盖类classform = PopulateFormFromFile()return render_template('addclass.html', classform=classform)return render_template('addclass.html', fileform=fileform, classform=classform)def PopulateFormFromFile():classform = AddClassForm()# 通常我们会读取作为参数传入的文件并提取数据，# 但让我们只使用这个文件顶部的虚拟数据，以及一些硬编码的值classform.name.data = "超级棒的课堂"classform.day.data = 4 # 星期四# 弹出学生信息中已有的任何空白字段而 len(classform.students) >0:classform.students.pop_entry()对于 student_id，student_info 中的名称:# 这两种方式中的任何一种都有相同的最终结果.## studentform = StudentForm()# studentform.student_id.data = student_id# studentform.student_name.data = name## 或者student_data = MultiDict([('student_id',student_id), ('student_name',name)])studentform = StudentForm(student_data)classform.students.append_entry(studentform)返回课堂表如果 __name__ == '__main__':app.run(调试=真，端口=5001)

模板/addclass.html

<头><title>Flask FieldList Demo</title><身体><h1>添加类</h1>{% 如果文件形式 %}<div><p>从文件中添加类:</p><form action="" method="post" enctype="multipart/form-data" name="fileform">{{ fileform.hidden_​​tag() }}<p><input type="submit" name="upload" value="Upload"></p></表单>

<小时>{％ 万一 ％}<div><form action="" method="post" name="classform">{{ classform.hidden_​​tag() }}类名:{{ classform.name }}
日:{{ classform.day }}<br><br><div><表格><tr><th>学生编号 </th><th>名称</th></tr>{% for student in classform.students %}<tr><td>{{ student.student_id }}</td><td>{{ student.student_name }}</td></tr>{% 结束为 %}

<p><input type="submit" name="addclass" value="Add Class"></p></表单>

有问题的代码片段发生在 classform.students.append_entry(studentform) 行.如果需要，我可以发布输出 HTML.我期望的是这样的:我得到的是:

解决方案

好的，我花了几个小时在这上面，最后这是一个微不足道的代码更改.

大多数字段允许您通过修改 data 属性来更改它们的值(正如我在上面所做的那样).事实上，在我的代码中，我有这样的评论:

 ### 这两种方式中的任何一种都有相同的最终结果.## studentform = StudentForm()# studentform.student_id.data = student_id# studentform.student_name.data = name#### 或者## student_data = MultiDict([('student_id',student_id), ('student_name',name)])# studentform = StudentForm(student_data)

但是，对于 FormFields 的 FieldList，我们不应该编辑 data 属性，而是应该编辑字段本身.以下代码按预期工作:

for student_id, name in student_info:学生表格 = 学生表格()studentform.student_id = student_id # 不是 student_id.datastudentform.student_name = 姓名classform.students.append_entry(studentform)

我希望这能帮助遇到同样问题的人.

I have a Flask app in which I can populate form data by uploading a CSV file which is then read. I want to populate a FieldList with the data read from the CSV. However, when I try to populate the data, it enters raw HTML into the TextFields instead of just the value that I want. What am I doing wrong?

app.py

from flask import Flask, render_template, request, url_for
from flask.ext.wtf import Form
from wtforms import StringField, FieldList, FormField, SelectField
from wtforms.validators import DataRequired
from werkzeug.datastructures import MultiDict

app = Flask(__name__)
app.config['SECRET_KEY']='asdfjlkghdsf'

# normally student data is read in from a file uploaded, but for this demo we use dummy data
student_info=[("123","Bob Jones"),("234","Peter Johnson"),("345","Carly Everett"),
              ("456","Josephine Edgewood"),("567","Pat White"),("678","Jesse Black")]

class FileUploadForm(Form):
    pass

class StudentForm(Form):
    student_id = StringField('Student ID', validators = [DataRequired()])
    student_name = StringField('Student Name', validators = [DataRequired()])

class AddClassForm(Form):
    name = StringField('classname', validators=[DataRequired()])
    day = SelectField('classday', 
                      choices=[(1,"Monday"),(2,"Tuesday"),(3,"Wednesday"),(4,"Thursday"),(5,"Friday")],
                      coerce=int)

    students = FieldList(FormField(StudentForm), min_entries = 5) # show at least 5 blank fields by default

@app.route('/', methods=['GET', 'POST'])
def addclass():
    fileform = FileUploadForm()
    classform = AddClassForm()

    # Check which 'submit' button was called to validate the correct form
    if 'addclass' in request.form and classform.validate_on_submit():
        # Add class to DB - not relevant for this example.
        return redirect(url_for('addclass'))

    if 'upload' in request.form and fileform.validate_on_submit():
        # get the data file from the post - not relevant for this example.
        # overwrite the classform by populating it with values read from file
        classform = PopulateFormFromFile()
        return render_template('addclass.html', classform=classform)

    return render_template('addclass.html', fileform=fileform, classform=classform)

def PopulateFormFromFile():
    classform = AddClassForm()

    # normally we would read the file passed in as an argument and pull data out, 
    # but let's just use the dummy data from the top of this file, and some hardcoded values
    classform.name.data = "Super Awesome Class"
    classform.day.data = 4 # Thursday

    # pop off any blank fields already in student info
    while len(classform.students) > 0:
        classform.students.pop_entry()

    for student_id, name in student_info:
        # either of these ways have the same end result.
        #
        # studentform = StudentForm()
        # studentform.student_id.data = student_id
        # studentform.student_name.data = name
        #
        # OR
        student_data = MultiDict([('student_id',student_id), ('student_name',name)])
        studentform = StudentForm(student_data)

        classform.students.append_entry(studentform)

    return classform


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

templates/addclass.html

<html>
    <head>
        <title>Flask FieldList Demo</title>
    </head>
    <body>
        <h1>Add Class</h1>
        {% if fileform %}
        <div>
            <p>Add class from file:</p>
            <form action="" method="post" enctype="multipart/form-data" name="fileform">
                {{ fileform.hidden_tag() }}
                <p><input type="submit" name="upload" value="Upload"></p>
            </form>
        </div>
        <hr>
        {% endif %}
        <div>
            <form action="" method="post" name="classform">
                {{ classform.hidden_tag() }}
                Class Name: {{ classform.name }}<br>
                Day: {{ classform.day }}<br>
                <br>
                <div>
                    <table>
                        <tr>
                            <th> Student Number </th>
                            <th> Name </th>
                        </tr>
                        {% for student in classform.students %}
                        <tr>
                            <td>{{ student.student_id }}</td>
                            <td>{{ student.student_name }}</td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>
                <p><input type="submit" name="addclass" value="Add Class"></p>
            </form>
        </div>
    </body>
</html>

The offending code snippet happens at the line classform.students.append_entry(studentform). I can post the output HTML if required. What I expect is something like this: What I get instead is:

解决方案

OK, I spent hours on this and in the end it was such a trivial code change.

Most fields let you change their value by modifying the data attribute (as I was doing above). In fact, in my code, I had this comment as above:

    ### either of these ways have the same end result.
    #
    # studentform = StudentForm()
    # studentform.student_id.data = student_id
    # studentform.student_name.data = name
    #
    ### OR
    #
    # student_data = MultiDict([('student_id',student_id), ('student_name',name)])
    # studentform = StudentForm(student_data)

However, in the case of a FieldList of FormFields, we should not edit the data attribute, but rather the field itself. The following code works as expected:

for student_id, name in student_info:

    studentform = StudentForm()
    studentform.student_id = student_id     # not student_id.data
    studentform.student_name = name

    classform.students.append_entry(studentform)

I hope this helps someone experiencing the same problem.

这篇关于使用数据填充 WTForms FormField FieldList 导致字段中的 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！