在 Flask/WTForms 中创建具有不同数量的重复子表单的表单

Question

我的模型目前有三个相关的对象（还有更多，但只有三个与这个问题相关）。用户、网络和电子邮件。我想要做的是拥有一组已定义的网络，并允许每个用户在每个网络上都有一个电子邮件地址（这些稍微复杂一些，但我已将它们缩减为我认为相关的内容） .

class User(UserMixin, db.Model):
    """
    The User object.
    """
    __tablename__ = 'users'
    id = db.Column(db.Integer, primary_key=True)
    #    email = db.Column(db.String(64), unique=True, index=True)
    username = db.Column(db.String(64), unique=True, index=True)
    password_hash = db.Column(db.String(128))
    firstname = db.Column(db.String(64))
    lastname = db.Column(db.String(64), unique=False, index=True)
    email = db.relationship('Email', backref='user')

class Network(db.Model):
    __tablename__ = 'networks'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(64), index=True)
    emails = db.relationship('Email', backref='network', lazy='dynamic')

class Email(db.Model):
    __tablename__ = 'emails'
    id = db.Column(db.Integer, primary_key=True)
    network_id = db.Column(db.Integer, db.ForeignKey('networks.id'))
    user_id = db.Column(db.Integer, db.ForeignKey('users.id'))
    address = db.Column(db.String(64))

我的看法：

@main.route('/edit-profile', methods=['GET', 'POST'])
@login_required
def edit_profile():
    form = EditProfileForm(obj=current_user)
    form.email.min_entries=Network.query.count()
    if form.validate_on_submit():
        form.populate_obj(current_user)
        db.session.add(current_user)
        db.session.commit()
        flash("Your profile has been updated.")
        return redirect(url_for('.user', username=current_user.username))
    return render_template('edit_profile.html', form=form)

和形式：

class EmailForm(Form):
    id = HiddenField('Id')
    address = StringField('Address', validators=[DataRequired(), Email()])
    network = QuerySelectField(query_factory=get_networks)


class EditProfileForm(Form):
    username = StringField('Username', validators=[Length(0, 64),
                                                   Regexp('[A-Za-z0-9_\.\-]'),
                                               DataRequired()])
    firstname = StringField('First name', validators=[Length(0, 64),
                                                      DataRequired()])
    lastname = StringField('Last name', validators=[Length(0, 64),
                                                    DataRequired()])
    email = ModelFieldList(FormField(EmailForm), model=Email)
    submit = SubmitField('Submit')

外部表单的 HTML：

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

{% block title %}Edit Profile{% endblock %}

{% block page_content %}
    <div class="page-header">
        <h1>Edit Your Profile</h1>
    </div>
    <div class="col-md-8">
        {{ wtf.quick_form(form) }}
    </div>
{% endblock %}

这是它在 Chrome 和 Firefox 中的样子：

所以我显然做错了什么，因为：

1. 子表单的小部件看起来与外部表单的小部件完全不同，并且
2. 子表单一直显示在外部表单的顶部。

我在哪里做错了？我尝试不使用 wtf.quick_form() ，但也无法手动让它看起来正确。为此，我将 {{ wtf.quick_form() }} 替换为：

        <label>{{ form.username.label }}</label>
        {{ form.username }}
        <label>{{ form.firstname.label }}</label>
        {{ form.firstname }}
        <label>{{ form.lastname.label }}</label>
        {{ form.lastname }}
        <div data-toggle="fieldset" id="email-fieldset">
            {{ form.email.label }}
            <table class="ui table">
                <thead>
                <th>Network</th>
                <th>Address</th>
                <th>
                    {{ form_button(url_for('main.add_email'),

                            icon ('plus')) }}
                </th>
                </thead>
                <tbody>
                {% for e in form.email %}
                    <tr data-toggle="fieldset-entry">
                        <td>{{ e.network }}</td>
                        <td>{{ e.address }}</td>
                        <td>
                            {{ form_button(url_for('main.remove_email',
                                    id=loop.index), icon ('remove')) }}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {{ form.submit }}

当我渲染它时，它在我的浏览器中显示如下：

这具有一致的优点，但不是我想要使用烧瓶引导程序获得的外观。我正在努力弄清楚哪种方法可以让我更轻松地到达我想去的地方。

解决方案

将表单 html 更改为此给了我正在拍摄的 UI 元素。关键是要理解“class_”可以传入并在输出 html 中呈现为“class”。

    <div class="form-group required"><label class="control-label">{{ form.username.label }}</label>
    {{ form.username(class_='form-control') }}</div>
    <div class="form-group required"><label class="control-label">{{ form.firstname.label }}</label>
    {{ form.firstname(class_='form-control') }}</div>
    <div class="form-group required"><label class="control-label">{{ form.lastname.label }}</label>
    {{ form.lastname(class_='form-control') }}</div>
    <div data-toggle="fieldset" id="email-fieldset" class="form-group">
        {{ form.email.label }}
        <table class="ui table">
            <thead>
            <th>Network</th>
            <th>Address</th>
            <th>
                {{ form_button(url_for('main.add_email'),

                        icon ('plus')) }}
            </th>
            </thead>
            <tbody>
            {% for e in form.email %}
                <tr data-toggle="fieldset-entry">
                    <td>{{ e.network(class_='form-control') }}</td>
                    <td>{{ e.address(class_='form-control') }}</td>
                    <td>
                        {{ form_button(url_for('main.remove_email',
                                id=loop.index), icon ('remove')) }}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

产生这个：

Answer 1

答案是简单地将“class_”传递给 .html 表单中的每个字段构造函数。