'Fieldlist' / 'FormField' not rendering properly with flask_wtf

Question

I use fieldlists in wtforms with flask but their default values do not render correctly.

In the example below the Fieldlist has a min_entries value of 1 and I add two additional entries via the append_entry() method.

The additional two entries do not render correctly as their value is no longer the default value but some ugly text that mixes html and the default value.

For now I have decided to not use fieldlists at all in my project and instead I generate a fix number of entries via min_entries, which means that I can't use a dynamic number of entries.

How flask renders the Fieldlist entries

First entry: value="[Enter track number]"
Second entry: value="<input id="track" name="track" type="text" value="[Enter track number]">"

Dependencies and folder tree

flask: 1.0.2
Flask-Bootstrap: 3.3.7.1
flask-wtf: 0.14.2

Folder structure:
├── app.py
├── templates
| └── album_add.html

app.py

# Load and initialise flask variables
app = Flask(__name__)
SECRET_KEY = os.urandom(32); app.config['SECRET_KEY'] = SECRET_KEY
bootstrap = Bootstrap(app)

# form
class TrackShortList(FlaskForm):
    song_index = SelectField('Select Track')
    track_number = StringField('Track number', default='[Enter track number]')
    def __init__(self, csrf_enabled=False, *args, **kwargs):
        super(TrackShortList, self).__init__(csrf_enabled=csrf_enabled, *args, **kwargs) # required to disable csrf otherwise 'CSRF Token' is displayed
        # see https://stackoverflow.com/questions/15649027/wtforms-csrf-flask-fieldlist
class selectTracks(FlaskForm):
    tracks = FieldList(FormField(TrackShortList), min_entries=1)

# route
@app.route('/addtrack', methods=['post','get'])
def addtrack():
    track_select = [("Select track",)*2, ("A track",)*2, ("Another track",)*2]
    form = selectTracks()
    for i in range(2):
        trackChildForm = TrackShortList()
        form.tracks.append_entry(trackChildForm)
    for sub_form in form.tracks:
        sub_form.song_index.choices = track_select  
    if form.validate_on_submit():
        pass
    return render_template('album_add.html', form=form)

album_add.html

{% import "bootstrap/wtf.html" as bswtf %}    
<div class='form'>
    <form method="POST">
        {{ form.hidden_tag() }}
        {% for track_select in form.tracks %}
        <tr>
            {% for field in track_select  %}
                <td>{{ bswtf.form_field(field) }}</td>
            {% endfor %}
         </tr>
         <hr>
        {% endfor %}
</div>

score 1 · Accepted Answer · answered Jan 02 '19 at 11:46

The route below works.

The difference is this line trackChildForm.track_number = '[Enter track number]' which I assume overrides the default TrackShortList.track_number value.

I found this solution by looking at a similar problem explained here. But I have no idea why it worked so any clarification is welcome.

@app.route('/addtrack_working', methods=['post','get'])
def addtrack_working():
    track_select = [("Select track",)*2, ("A track",)*2, ("Another track",)*2]
    form = selectTracks()
    for i in range(2):
        trackChildForm = TrackShortList()
        trackChildForm.track_number = '[Enter track number]'
        form.tracks.append_entry(trackChildForm)
    for sub_form in form.tracks:
        sub_form.song_index.choices = track_select
    if form.validate_on_submit():
        pass
    return render_template('album_add.html', form=form)

score 0 · Answer 2 · edited Mar 06 '19 at 12:51

The append_entry class expects data, not a form. If not data is supplied an empty instance of the defined form is added.

So for your use case that would be like:

track_select = [("Select track",)*2, ("A track",)*2, ("Another track",)*2]
form = selectTracks()
for i in range(2):
    form.tracks.append_entry()
for sub_form in form.tracks:
    sub_form.song_index.choices = track_select
if form.validate_on_submit():
    pass
return render_template('album_add.html', form=form)

'Fieldlist' / 'FormField' not rendering properly with flask_wtf

How flask renders the Fieldlist entries

Dependencies and folder tree

app.py

album_add.html

2 Answers2