flask-bootstrap quick_form 缺少提交按钮

Question

正在尝试使用 flask-bootstrapquick_form。

HTML 模板 my-form.j2:

{% import "bootstrap/wtf.html" as wtf %}
{% extends "layout.j2" %}

{% block content %}

<h1>My form</h1>
{{ wtf.quick_form(form) }}

{% endblock content %}

表格class:

class MyForm(FlaskForm):
    """A WTForm for configuring vehicle information"""
    field1 = StringField('First field', [wtforms.validators.required()])
    field2 = StringField('Second field', [wtforms.validators.required()])
    field3 = StringField('Third field', [wtforms.validators.required()])

表单处理程序：

@app.route('/myform', methods=('GET', 'POST'))
def my_form():
    form = MyForm()
    if form.validate_on_submit():
        myData = form.data
        return redirect("/")
    return render_template("my-form.j2", form=form)

遗憾的是，我没有看到提交按钮呈现，即使我添加 {{ form.submit }} 到我的 table。有什么想法吗？

Answer 1

我相信您可以直接在 {{ wtf.quick_form(form) }} 之后添加输入字段，并将它们都放在 HTML 表单中：

<input class="btn btn-primary" type="submit" value="Login">

例子

{% import "bootstrap/wtf.html" as wtf %}
{% extends "layout.j2" %}

{% block content %}

<h1>My form</h1>
<form method="POST" action="/">
    {{ wtf.quick_form(form) }}
    <input class="btn btn-primary" type="submit" value="Login">
</form>
{% endblock content %}

Answer 2

@atwalsh 的回答很好，但您也可以将提交按钮放在 class 中，然后在您的模板中调用它：

class MyForm(FlaskForm):
    field1 = StringField('First field', [wtforms.validators.required()])
    field2 = StringField('Second field', [wtforms.validators.required()])
    field3 = StringField('Third field', [wtforms.validators.required()])
--> submit_button = SubmitField('Submit Form')

然后输入你的模板：

{{ wtf.quick_form(form, button_map={'submit_button': 'primary'}) }}
                            ^            ^

编辑：您还需要导入 SubmitField 方法：

from wtforms import SubmitField

flask-bootstrap quick_form 缺少提交按钮

flask-bootstrap quick_form missing Submit button

flask

flask-wtforms

flask-bootstrap