Flask-wtf：在页面加载时从数据库设置 DecimalRangeField 值

Question

我将 Flask-wtf 与 DecimalRangeField 一起使用。当我将现有记录加载到表单中时，我想将范围滑块设置为数据库中的值。

我的表格看起来像：

downtime = DecimalRangeField(label='Outage/Downtime (hours)',
                             render_kw={"value": "0",
                                        "max": "5",
                                        "step": "0.5",
                                        "style": "--min: 0; --max: 5; --val: 0"
                                        },
                             )

这会呈现一个漂亮的滑块。渲染后的 HTML 为：

<input id="downtime" max="5" name="downtime" step="0.5" style="--min: 0; --max: 5; --val: 0" type="range" value="0">
<label id="outage_slider_label">0</label>

我可以使用它并将该值与表单的其余部分一起保存到我的数据库中。 但是，当我加载该记录并尝试使用某些 JavaScript 显示滑块值时，它不起作用。

我正在“获取”路线中从数据库加载，如下所示：

form.downtime.data = change.downtime
print(f'downtime {form.downtime.data}')

例如，如果我将 6 保存到我的数据库中，它确实会检索到打印语句所证明的正确值。

然后我想使用一些 javascript 将滑块设置到正确的位置并在滑块标签中显示它。 但当我这么做的时候

let downtime_slider = document.getElementById('downtime')
console.log(downtime_slider.value)

它显示 0 而不是 6（或来自数据库的任何值）。

为什么会这样？

Answer 1

我用一些 jinja2 魔法解决了这个问题。

我修改了我的模板：

<div class="ms-3">
  {{ form.downtime.label(class="form-label") }}
  {% if form.downtime.data %}
    {% set downtime_value = form.downtime.data %}
  {% else %}
    {% set downtime_value = 0 %}
  {% endif %}
  <div class="hstack gap-2">
    {{ form.downtime(class="range-slider", value=downtime_value) }}
    <label id="outage_slider_label">{{ downtime_value }}</label>
  </div>
</div>

现在，当页面加载时，滑块设置到数据库中记录的正确位置。如果没有数据（即它是新记录），则该值设置为 0。

快乐的日子！

Answer 2

1. 从 wtforms 继承 Field 并覆盖其 call 描述符，以返回自定义 html 字段，例如：可以是 span
2. 在继承自 FlaskForm 的 FormClass 中，实例化返回自定义 Html 字段的类
3. 在您的前端中，使用 JavaScript 定位 RangeField 和 CustomHTML 字段
4. 在 RangeField 上注册一个 input eventListener，这样随着滑块的移动，相应的值就会注册到 customHTML 元素

`` 示例烧瓶应用程序 表格.py

from wtforms import DecimalRangeField, Field

class DecimalIndexRangeValueLabel(Field):
    def __call__(self,**kwargs):
        return "<span id='decimal_index_range_value'>0</span>"

class  MyForm(FlaskForm):
     decimalslider = DecimalRangeField(render_kw={'min': '0', 'max': '1', 'step': '0.1'})
     decimal_slider_value = DecimalIndexRangeValueLabel(label='Slider Value')

在模板文件夹中，渲染表单 在这种情况下使用 Flask-bootstrap

{% from 'bootstrap5/form.html' import render_form %}
<div> 
  {{ render_form(form)}}

 # import javascript file
<script src="static/rangeval_display.js"></script>
</div>

在您的静态文件夹中， 例如：rangeval_display.js

let decimal_slider = document.querySelector('#decimalslider')
let decimal_slider_value = document.querySelector('#decimal_index_range_value')

decimal_slider_value.textContent = decimal_slider.value;

decimal_slider.addEventListener('input', (event) =>{
    decimal_slider_value.textContent = event.target.value
})

它应该按预期工作

[来源：Flask -> https://wtforms.readthedocs.io/en/2.3.x/_modules/wtforms/fields/core/#Field.html]

[来源：JavaScript -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range]