Flask - Форма на модальной - Как отобразить ошибку поля на модальной? - PullRequest
Новая
       61

Flask - Форма на модальной - Как отобразить ошибку поля на модальной?

1 голос
/ 19 сентября 2019

Я экспериментирую с колбой и просто создаю некоторые базовые функции для добавления данных в форму, отображаемую в модальном режиме.Хотя мне удалось заставить форму отображаться в модальном режиме и сохранить ее из модального режима, я изо всех сил пытаюсь понять, что необходимо сделать, чтобы гарантировать, что ошибки проверки поля отображаются на самом модале.В настоящее время, если есть ошибки, пользователь перенаправляется на целую страницу с формой редактирования.

Говорят, что картинка лучше, чем слова - так вот рисунок, показывающий, что происходит:

Modal Form Error Goes to the page

Весь код приложения находится на github , а текущее состояние на heroku доступно здесь ... имя пользователя: admin @admin.com и пароль: adminpassword .В любом случае, это все песочница.

Соответствующий код такой, как показано ниже:

rout.py 


@expenses.route("/expense")
@login_required
def expense():
    page = request.args.get('page', 1, type=int)
    expenses = Expense.query.order_by(Expense.expense_date.desc()).paginate(page=page, per_page=5)
    form = ExpenseForm()
    return render_template('expense/expense.html', expenses=expenses, form=form)


@expenses.route("/expense/new", methods=['GET', 'POST'])
@login_required
def new_expense():
    form = ExpenseForm()
    if form.validate_on_submit():
        expense = Expense(description=form.description.data, expense_date=form.expense_date.data,
                        amount=form.amount.data,vat_amount=form.vat_amount.data,Transferrable=form.Transferrable.data, author=current_user)
        db.session.add(expense)
        db.session.commit()
        flash('Your expense has been created!', 'success')
        return redirect(url_for('expenses.expense'))
    return render_template('expense/create_expense.html', title='New Expense',
                           form=form, legend='New Expense')

Теперь файл cost.html большой, но модальныйвызывается с использованием следующего: 

<button type="button" class="btn btn-primary btn-sm m-1" data-toggle="modal" data-target="#AddNewModal">Add New Expense</button>
{% include "expense/partials/addModal.html" %}

и addModal.html, как показано ниже: 

<!-- Add New Modal -->
{% from "util/macros.html" import form_field with context %}
<div class="modal fade" id="AddNewModal" tabindex="-1" role="dialog" aria-labelledby="AddNewModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="AddNewModalLabel">Add New Expense</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="amount-section">
          <form method="POST" action="/expense/new">
          {{ form.hidden_tag() }}
          <fieldset class="form-group">
            <legend class="border-bottom mb-4">{{ legend }}</legend>
            <div class="form-group">
              {{ form.description.label(class="form-control-label") }}
              {% if form.description.errors %}
                {{ form.description(class="form-control form-control-lg is-invalid") }}
                <div class="invalid-feedback">
                  {% for error in form.description.errors %}
                  <span>{{ error }}</span>
                  {% endfor %}
                </div>
              {% else %}
                {{ form.description(class="form-control form-control-lg") }}
              {% endif %}
            </div>
            <div class="form-group">
              {{ form.amount.label(class="form-control-label") }}
              {% if form.amount.errors %}
                {{ form.amount(class="form-control form-control-lg is-invalid") }}
                <div class="invalid-feedback">
                {% for error in form.amount.errors %}
                  <span>{{ error }}</span>
                {% endfor %}
                </div>
              {% else %}
                {{ form.amount(class="form-control form-control-lg") }}
              {% endif %}
            </div>
            <div class="form-group">
              {{ form.expense_date.label(class="form-control-label") }}
              {% if form.expense_date.errors %}
                {{ form.expense_date(class="form-control form-control-lg is-invalid") }}
                <div class="invalid-feedback">
                  {% for error in form.expense_date.errors %}
                    <span>{{ error }}</span>
                  {% endfor %}
                </div>
              {% else %}
                {{ form.expense_date(class="form-control form-control-lg", type="date") }}
              {% endif %}
            </div>
            <div class="form-group">
              {{ form.vat_amount.label(class="form-control-label") }}
              {% if form.vat_amount.errors %}
                {{ form.vat_amount(class="form-control form-control-lg is-invalid") }}
                <div class="invalid-feedback">
                  {% for error in form.vat_amount.errors %}
                    <span>{{ error }}</span>
                  {% endfor %}
                </div>
              {% else %}
                {{ form.vat_amount(class="form-control form-control-lg") }}
              {% endif %}
            </div>
            <!-- {{ form_field(form.vat_amount,with_label=True) }} -->
            <div class="form-group">
            {% if form.Transferrable.errors %}
              {{ form.Transferrable(class="form-control form-control-lg is-invalid") }}
              <div class="invalid-feedback">
                {% for error in form.Transferrable.errors %}
                  <span>{{ error }}</span>
                {% endfor %}
              </div>
            {% else %}
              {{ form.Transferrable(type="checkbox") }}
            {% endif %}
              {{ form.Transferrable.label(class="form-control-label") }}
            </div>
            <!-- {{ form_field(form.Transferrable) }} -->
            <p><button type="submit" class="btn btn-primary">Add</button></p>
            </fieldset>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 19 сентября 2019

Это потому, что если в форме есть какие-то ошибки, вы отображаете create_expense.html, поэтому форма представлена ​​не в модальном виде.

Я бы объединил 2 представления: /expense/new и /expense, чтобы она могла обрабатывать обаGET и POST и условно отображать модальное значение, если в форме есть ошибки.

Объединенные представления: 

@expenses.route("/expense", methods=['GET', 'POST'])
@login_required
def expense():
    page = request.args.get('page', 1, type=int)
    expenses = Expense.query.order_by(Expense.expense_date.desc()).paginate(page=page, per_page=5)
    form = ExpenseForm()
    if form.validate_on_submit():
        expense = Expense(description=form.description.data, expense_date=form.expense_date.data,
                        amount=form.amount.data,vat_amount=form.vat_amount.data,Transferrable=form.Transferrable.data, author=current_user)
        db.session.add(expense)
        db.session.commit()
        flash('Your expense has been created!', 'success')
    return render_template('expense/expense.html', expenses=expenses, form=form)

Условное модальное отображение в нижней части addModal.html: 

{% if form.errors %}

<script>
$('#AddNewModal').modal('show');
</script>

{% endif %}

И действие для формы в addModal.html также должно быть изменено на: 

<form method="POST" action="/expense">

Однако после этих изменений представления /expense/new и /expense будут иметь некоторый общий код, поэтому рефакторингможет понадобитьсяТеперь вы хотя бы знаете, почему ошибки не отображаются в модальном порядке.

...