HTML в Jinja2, как атрибутировать классы для формирования переменных в соответствии с предыдущим стилем - PullRequest
Новая
       20

HTML в Jinja2, как атрибутировать классы для формирования переменных в соответствии с предыдущим стилем

0 голосов
/ 17 июня 2020

У меня есть шаблон bootstrap формы входа.
Я пытаюсь преобразовать HTML в jinja2, чтобы я мог использовать LoginForm переменные моего flask приложения. В LoginForm я определяю проверки, метки и другие ошибки, которые я хотел бы отображать, если пользовательский ввод неверен.

HTML bootstrap шаблон 

<span class="bmd-form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <i class="material-icons">email</i>
      </span>
    </div>
    <input type="email" class="form-control" placeholder="Email...">
  </div>
</span>

enter image description here

Вот что я сделал, но результат не позволяет мне редактировать содержимое ввода, однако я правильно получаю данные переменной form.email.label. 

<span class="bmd-form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <i class="material-icons">email</i>
      </span>
    </div>
    {{ form.email.label(class="form-control", type="email") }}
    {% if form.email.errors %}
      {{ form.email(class="form-control form-control-lg is-invalid") }}
        <div class="invalid-feedback">
          {% for error in form.email.errors %}
              <span>{{ error }}</span>
          {% endfor %}
      </div>
    {% endif %}
  </div>
</span>

enter image description here

Мы будем очень признательны за любые подсказки!

1 Ответ

1 голос
/ 18 июня 2020

Итак, ваша проблема здесь: 

{{ form.email.label(class="form-control", type="email") }}
{% if form.email.errors %}
  {{ form.email(class="form-control form-control-lg is-invalid") }}
  <div class="invalid-feedback">
  {% for error in form.email.errors %}
    <span>{{ error }}</span>
  {% endfor %}
  </div>
{% endif %}

Хотя в вашем простом фрагменте HTML у вас нет метки, в версии Jinja у вас есть метки и вы помещаете input в if form.email.errors, эффективно отображая ввод только тогда, когда в вашей форме есть ошибка.

Это просто метка формы, а не ввод: 

{{ form.email.label(class="form-control", type="email") }}

Это ваш фактический ввод 

{{ form.email(class="form-control form-control-lg is-invalid") }}

Ваш правильный код, скорее, должен быть: 

{{ form.email(class="form-control form-control-lg") }}
{% if form.email.errors %}
  <div class="invalid-feedback">
  {% for error in form.email.errors %}
    <span>{{ error }}</span>
  {% endfor %}
  </div>
{% endif %}

Пожалуйста, обратите внимание , что я удалил этикетку , поскольку у вас его нет в дизайне, который вы показали в качестве примера, у вас есть заполнитель, а не метка.

При этом вы пропустите класс is-invalid в поле. Я бы сказал, что это должно работать: 

{{ form.email(class="form-control form-control-lg" ~ (" is-invalid" if form.email.errors else "")) }}
{% if form.email.errors %}
  <div class="invalid-feedback">
  {% for error in form.email.errors %}
    <span>{{ error }}</span>
  {% endfor %}
  </div>
{% endif %}
...