时间戳

首页 > 解决方案 > 如何使用 jinja2 宏修改 css 类

python - 如何使用 jinja2 宏修改 css 类

问题描述

大家好，我正在学习烧瓶并遇到问题。我正在尝试根据验证修改输入表单控件类。

在 jinja2 模板中，我有以下（我正在使用 render_field）导入了宏：

{% from 'includes/_formhelpers.html' import render_field %}

          <div class="form-group">
            <div class="input-group input-group-alternative mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text"><i class="ni ni-hat-3"></i></span>
              </div>
              {{ render_field(form.username, placeholder="Username",class="form-control") }}
            </div>
          </div>

然后在宏文件中我有以下内容：

{% macro render_field(field) %}
{{ field(**kwargs)|safe }}
{% if field.errors %}
  {% for error in field.errors %}
      <input class="form-control is-invalid">
      <div class="invalid-feedback">
    {{ error }}
    </div>
  {% endfor %}
{% endif %}
{% endmacro %}

问题是宏在渲染另一个输入框

呈现形式

生成的 HTML：

<div class="form-group">
 <div class="input-group input-group-alternative mb-3">
         <div class="input-group-prepend">
            <span class="input-group-text"><i class="ni ni-hat-3"></i></span>
         </div>

    <input class="form-control" id="username" name="username" placeholder="Username" required="" type="text" value="pandazulweb">
    <input class="form-control is-invalid">
        <div class="invalid-feedback">
            Username already in use.
        </div>
</div>

我认为这与 kwargs 以及我如何将课程传递给模板有关，但我是 jinja2 的菜鸟

标签： pythonflaskjinja2

解决方案

除非我遗漏了什么，否则第二个字段似乎是由于 '<input class=“form-control is-invalid”>' 您将其包含在宏的错误条件中。

编辑： 为了将类传递给表单字段，您需要使用'class_=“is-invalid”'，而不是'class='。因此，只需使用它并从错误案例中删除第二个输入。

编辑2：我想我明白了问题所在。您需要将第一次调用 field() 放在宏的错误块中，在 else 块中。因此，只有在没有错误的情况下，它才会使用 kwargs 等创建字段。

推荐阅读