在Flask / WTForms中创建一个具有不同数量的重复子表单的表单 [英] Creating a form with a varying number of repeated subform in Flask/WTForms
问题描述
User对象。
__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。关系（'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））
我的看法：
$ p $ @ 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_templat e（'edit_profile.html'，form = form）
和表单：
类EmailForm（Form）：
id = HiddenField（'Id'）
address = StringField（'Address'，validators = [DataRequired（），Email（）]）
network = QuerySelectField（query_factory = get_networks）
$ b类EditProfileForm（Form）：
username = StringField '，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 = Field（'Submit'）
外部表单的HTML： b
{％extendsbase.html％}
{％importbootstrap / wtf.htmlas wtf％}
{％block title％}编辑个人资料{％endblock％}
{％block page_content％}
< div class =page-header>
< h1>编辑个人资料< / h1>
< / div>
< div class =col-md-8>
{{wtf.quick_form（form）}}
< / div>
{％endblock％}
以下是Chrome和Firefox的外观：
所以我显然做错了，因为：
- 子窗体的小部件看没有任何东西像外部形式的那样，而且
- 子表单不断显示在外部表单的顶部。
我在哪里出错了？我尝试不使用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 =fieldsetid =email-fieldset>
{{form.email.label}}
< table class =ui table>
< thead>
< th>网络< / th>
< th>地址< / th>
< th>
{{form_button（url_for（'main.add_email'），
icon（'plus'））}}
< / th>
< / thead>
< tbody>
{form.email％中的e％}
< 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}}
当我渲染它时，我的浏览器：
这有一致性的优点，但不是我想用flask-bootstrap得到的样子。我正在努力弄清楚哪种方法可以让我更容易去哪里。
解决方案
改变形式的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 =fieldsetid =email-fieldsetclass =form-group>
{{form.email.label}}
< table class =ui table>
< thead>
< th>网络< / th>
< th>地址< / th>
< th>
{{form_button（url_for（'main.add_email'），
icon（'plus'））}}
< / th>
< / thead>
< tbody>
{form.email％中的e％}
< 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>
产生这个：
答案是简单地通过class_ 到.html表单中的每个字段构造函数。
My model currently has three related objects (there are more, but only three are relevant to this problem). User, Network, and Email. What I want to be able to do is have a defined set of Networks, and to allow each User to have an Email address on each Network (these are slightly more complex, but I've cut them down to what I think is relevant).
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))
My view:
@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)
And forms:
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')
The outer form's 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 %}
Here's what it looks like in both Chrome and Firefox:
So I'm obviously doing something wrong, since:
- The sub-form's widgets look nothing like those of the outer form, and
- The sub-form keeps being shown over the top of the outer form.
Where have I gone wrong with this? I tried not using wtf.quick_form() but couldn't get it to look right manually, either. To do that, I replaced the {{ wtf.quick_form() }} with this:
<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 }}
When I render this, it appears as below in my browser:
This has the virtue of being consistent, but isn't the look I want to get using flask-bootstrap. I'm struggling to figure out which approach will get me where I want to go more easily.
SOLUTION
Changing the form html to this gave me the UI elements I was shooting for. The key was understanding that "class_" could be passed in and would be rendered in the output html as "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>
Yielding this:
The answer was to simply pass in "class_" to each field constructor within the .html form.
这篇关于在Flask / WTForms中创建一个具有不同数量的重复子表单的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
