填充WTForms FormField FieldList与数据结果在字段中的HTML [英] Filling WTForms FormField FieldList with data results in HTML in fields

问题描述

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

app.py

  from flask import从flask.ext.wtf导入Flask，render_template，request，url_for 
从wtforms导入表单
导入StringField，FieldList，FormField，SelectField $ b $ wtforms.validators DataRequired 
 from werkzeug.datastructures import MultiDict 
 
 app = Flask（__ name__）
 app.config ['SECRET_KEY'] ='asdfjlkghdsf'
 
＃通常学生数据是从上传的文件中读取的，但是对于这个演示，我们使用虚拟数据
 student_info = [（123，Bob Jones），（234，Peter Johnson）， 345，Carly Everett），
（456，Josephine Edgewood），（567，Pat White），（678，Jesse Black）] 
 
 class FileUploadForm（Form）：
 pass 
 $ b class StudentForm（Form）：
 student_id = StringField（'Student ID'，validators = [DataRequired（）]） 
 student_name = StringField（'Student Name'，validators = [DataRequired（）]）
 
 cl屁股AddClassForm（Form）：
 name = StringField（'classname'，validators = [DataRequired（）]）
 day = SelectField（'classday'，
 choices = [（1， ），（2，星期二），（3，星期三），（4，星期四），（5，星期五）]，
 coerce = int）
 
 students = FieldList（FormField（StudentForm），min_entries = 5）＃默认显示至少5个空白字段
 
 @ app.route（'/'，methods = ['GET'，'POST '））
 def addclass（）：
 fileform = FileUploadForm（）
 classform = AddClassForm（）
 
＃检查哪个'submit'按钮被调用来验证正确的形式
如果request.form和classform.validate_on_submit（）中的addclass：
＃将类添加到DB  - 与此示例无关。 
返回重定向（url_for（'addclass'））
 
如果在request.form和fileform.validate_on_submit（）中上传：
＃这个例子不相关。 
＃使用从文件
中读取的值来填充类表单。classform = PopulateFormFromFile（）
 return render_template（'addclass.html'，classform = classform）
 
返回render_template（'addclass.html'，fileform =文件形式，classform = classform）
 
fb PopulateFormFromFile（）：$ b $会读取作为参数传入的文件并将数据拉出
＃但是我们只需使用这个文件顶部的虚拟数据和一些硬编码值
 classform.name.data =Super Awesome类
 classform.day.data = 4＃星期四
 
＃弹出学生信息中的空白字段
 while len（classform.students）> 0：
 classform.students.pop_entry（）
 
 for student_id，name in 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）
 
 return classform 
 
 $ b if __name__ =='__main__'：
 app.run（debug = True，port = 5001）
  

templates / addclass.html

 < html> 
< head> 
< title> Flask FieldList Demo< / title> 
< / head> 
< body> 
< h1>添加类别< / h1> 
 {％if fileform％} 
< div> 
 
从档案中新增班级：< / p> 
< form action =method =postenctype =multipart / form-dataname =fileform> 
 {{fileform.hidden_​​tag（）}} 
< p>< input type =submitname =uploadvalue =Upload>< / p> 
< / form> 
< / div> 
< hr> 
 {％endif％} 
< div> 
< form action =method =postname =classform> 
 {{classform.hidden_​​tag（）}} 
类名：{{classform.name}}< br> 
日：{{classform.day}}< br> 
< br> 
< div> 
< table> 
< tr> 
< th>学生号码< / th> 
< th>名称< / th> 
< / tr> 
 {％for classform.students％中的学生} 
< tr> 
< td> {{student.student_id}}< / td> 
< td> {{student.student_name}}< / td> 
< / tr> 
 {％endfor％} 
< / table> 
< / div> 
< p>< input type =submitname =addclassvalue =Add Class>< / p> 
< / form> 
< / div> 
< / body> 
< / html> 
  

有问题的代码片段发生在 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 = StudentForm ）
 studentform.student_id = student_id＃not student_id.data 
 studentform.student_name = name 
 $ b 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屋！