Flask+FlaskForm更新记录时SelectField字段无法填充问题

问题根因 #

WTForms 的 SelectField 渲染逻辑和普通输入字段不同：

• StringField、DateField 这类普通输入字段，渲染时传入的 value 参数会直接覆盖字段原有值，所以之前的写法可以正常回显
• SelectField 渲染下拉框时，不会读取传入的 value 参数，只会遍历自身的 choices 配置，匹配和字段 data 属性值完全一致的选项，给该选项加上 selected 属性实现选中效果，所以模板里传 value=user_to_update.sex 完全不生效

另外当前 SelectField 的 choices 直接传入字符串列表的写法不够规范，容易出现值类型/内容不匹配导致的选中失败问题。

具体修复方法 #

1. 修改路由逻辑，在后端给表单字段预赋值 #

不要在模板层给字段传value，而是在GET请求渲染表单前，把数据库查到的用户数据直接赋值给表单对应字段的data属性，这是WTForms官方推荐的表单预填充方式，同时补上表单校验逻辑避免非法数据入库：

@app.route('/update/<int:id>', methods=['GET', 'POST'])
def update(id):
    form = Form()
    user_to_update = TblPatient.query.get_or_404(id)

    # POST请求时校验表单数据、写入数据库
    if form.validate_on_submit():
        user_to_update.lastname = form.lastname.data
        user_to_update.firstname = form.firstname.data
        user_to_update.birthdate = form.birthdate.data
        user_to_update.sex = form.sex.data
        db.session.commit()
        return redirect(url_for('add_record'))
    
    # GET请求时给表单预填充原有数据
    form.lastname.data = user_to_update.lastname
    form.firstname.data = user_to_update.firstname
    form.birthdate.data = user_to_update.birthdate
    form.sex.data = user_to_update.sex  # 核心：给SelectField的data赋值，会自动匹配选项选中

    return render_template('update.html', form=form, user_to_update=user_to_update)

2. 规范SelectField的choices配置 #

WTForms 要求 SelectField 的 choices 为**(提交值, 页面显示文本)**格式的元组列表，把表单类的sex字段改成规范写法，避免值匹配异常：

class Form(FlaskForm):
    lastname = StringField('Last Name', validators=[DataRequired()])
    firstname = StringField('Firstname', validators=[DataRequired()])
    birthdate = DateField('Date of Birth', format='%Y-%m-%d', validators=[DataRequired()])
    sex = SelectField('Sex',
                      choices=[('Select', 'Select'), ('Male', 'Male'), ('Female', 'Female')],
                      default='Select',
                      validators=[DataRequired()])
    submit = SubmitField('submit')

3. 简化模板渲染代码 #

去掉所有字段调用时传入的value参数，直接渲染字段即可，WTForms会自动根据字段的data属性完成值填充、下拉选项选中：

<form action="{{request.path}}" method="post">
    {{form.hidden_tag()}}
    <fieldset>
        <legend>Patient Info</legend>
        <p>
            {{form.lastname.label}} <br/>
            {{form.lastname(size=30)}}
        </p>
        <p>
            {{form.firstname.label}} <br/>
            {{form.firstname(size=30)}}
        </p>
        <p>
            {{form.birthdate.label}} <br/>
            {{form.birthdate()}}
        </p>
        <p>
            {{form.sex.label}} <br/>
            {{form.sex()}}
        </p>
    </fieldset>
    <br/>
    {{form.submit}}
</form>

注意事项 #

• 必须保证数据库中存储的sex字段值和choices里配置的提交值完全一致，包括大小写、前后空格，比如数据库存的是小写male、choices里配置的是Male，会因为值不匹配导致无法选中
• 所有WTForms字段的预填充都推荐在后端给data属性赋值的方式实现，不要在模板层传value参数，兼容性最好

内容的提问来源于stack exchange，提问作者paulllt