python - 在 Flask 应用程序中使用的 RadioField Wtforms 的自定义小部件未设置已检查
问题描述
我在 Flask 应用程序中使用的 RadioField Wtforms 的自定义小部件有问题。
自定义小部件渲染得很好,但它不起作用,因为它在选择它后没有在字段上设置“选中”。相反,如果我使用默认小部件,一切都很好,并且可以正常工作。
我还尝试了另一种更标准的方法,即在表单类定义中调用的“真实”自定义小部件......但我得到了完全相同的结果。
下面是代码,有什么建议吗?谢谢 :-)
#### ROUTE
bp = Blueprint('auth', __name__, url_prefix='/auth')
@bp.route('/generic_crud', methods=('GET', 'POST'))
@login_required
def generic_crud():
form = forms.BaseGenericForm()
if form.validate_on_submit():
# Insert the msg
models.BaseGenericFormTable.add_record( title_select = form.titleSelect.data,
title_radio = form.titleRadio.data,
title_checkbox = form.titleCheckbox.data )
return render_template('sample_wtforms/success.html')
return render_template('sample_wtforms/crud_generic.html', form=form)
#### FORM
class BaseGenericForm(FlaskForm):
titleSelect = SelectField( 'Title Select',
validators=[DataRequired(message='Title Select missed')],
choices=[ ('farmer' , 'Farmer'),
('politician', 'Corrupt Politician'),
('cop', 'No-nonsense City Cop'),
('rocket', 'Professional Rocket League Player'),
('lonely', 'Lonely Guy At A Diner'),
('pokemon', 'Pokemon Trainer')],
render_kw={"class":"custom-select"}
)
titleRadio = RadioField('Title Radio',
validators=[DataRequired(message='Title RadioBox missed')],
choices=[ ('farmer' , 'Farmer'),
('politician', 'Politician'),
('cop', 'No-nonsense Cop'),
('lonely', 'Lonely Guy'),
('pokemon', 'Trainer')]
)
titleCheckbox = RadioField('Title Checkbox',
validators=[DataRequired(message='Title CheckBox missed')],
choices=[ ('farmer' , 'Farmer'),
('politician', 'Politician'),
('cop', 'No-nonsense Cop'),
('lonely', 'Lonely Guy'),
('pokemon', 'Trainer')]
)
submit = SubmitField( 'Submit',
render_kw={"class":"btn btn-primary"}
)
#### TEMPLATE jinja2
{% block content %}
<form method="POST" class="container">
<!-- titleSelect -->
<div class="form-group row">
{{ form.titleSelect.label(class='col-4 col-form-label') }}
<div class="col-8">
{{ form.titleSelect }}
{% if form.titleSelect.errors %}
<div class="alert alert-danger" role="alert">
<ul class="errors">
{% for error in form.titleSelect.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
<!-- titleRadio -->
<div class="form-group row">
{{ form.titleRadio.label(class='col-4 col-form-label') }}
<div class="col-8">
{#{{ form.titleRadio }}#}
{% for value, label, selected in form.titleRadio.iter_choices() %}
<div class="custom-control custom-radio custom-control-inline">
<input id="radio{{ loop.index0 }}" name="titleRadio" type="radio" class="custom-control-input" value="{{ value }}" {% if selected %} checked="checked" {% endif %}>
<label for="radio{{ loop.index0 }}" class="custom-control-label">{{ label }}</label>
</div>
{% endfor %}
{% if form.titleRadio.errors %}
<div class="alert alert-danger" role="alert">
<ul class="errors">
{% for error in form.titleRadio.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
<!-- titleCheckbox ################################################ -->
<div class="form-group row">
{{ form.titleCheckbox.label(class='col-4 col-form-label') }}
<div class="col-8">
{#{{ form.titleCheckbox }}#}
{% for value, label, selected in form.titleCheckbox.iter_choices() %}
<div class="custom-control custom-checkbox custom-control-inline">
<input id="checkbox{{ loop.index0 }}" name="checkbox" type="checkbox" class="custom-control-input" value="{{ value }}" {% if selected %} checked="checked" {% endif %}>
<label for="checkbox{{ loop.index0 }}" class="custom-control-label">{{ label }}</label>
</div>
{% endfor %}
{% if form.titleCheckbox.errors %}
<div class="alert alert-danger" role="alert">
<ul class="errors">
{% for error in form.titleCheckbox.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
{{ form.csrf_token }}
<div class="form-group row">
<div class="offset-4 col-8">
{{ form.submit }}
</div>
</div>
</form>
{% endblock %}
解决方案
对于自定义小部件,我这样做:
<div id="{{ field.id }}">
{{ field.label(class="form-label") }}<br>
{% for subfield in field %}
<div class="form-check form-check-inline">
<input {% if subfield.checked %}checked {% endif %}type="radio" class="form-check-input" id="{{ subfield.id }}" name="{{ field.id }}" value="{{ subfield.id[-1] }}">
{{ subfield.label(class="form-check-label") }}
</div>
{% endfor %}
</div>
与您相关的部分应该是“{% if subfield.checked %}checked {% endif %}”
推荐阅读
- javascript - 异步函数返回未定义而不是数据
- terraform - 如何在 Terraform 中使用条件属性
- python - 我想在单个可视化中可视化以下数据框
- ios - 为什么 MKMapView 中的用户位置显示纬度 0.0 和经度 0.0?
- python - 在 Tkinter 中的多个窗口之间切换
- javascript - 如何获得 L.polygon 边界,不包括内部点
- c# - C#查看是否输入了某个键
- regex - 这个 Regex 表达式在哪里没有在 sed 中关闭(撇号括号)?
- javascript - 如何修复“服务器以非 JavaScript MIME 类型的 'image/jpeg' 响应”错误?
- css - 如何更改 Angular 4 中变量 Sass 的值?