قالب‌های فرم با قابلیت استفادۀ مجدد یا Reusable Forms Templates

سلام

اگر از مبحث قبلی به یاد داشته باشیم، منظور از این عنوان خلاصه سازی فرم ها و عدم تکرار یک سری کد در فایل های مختلف است. یعنی یک بار موارد ثابت را طراحی می کنیم و در فایل های جدید با اضافه‌کردن قسمت‌های قبلی و نوشتن قسمت‌های جدید به نتیجه‌ای که می‌خواهیم می‌رسیم.

خیلی خوب! در فولدر مربوط به تمپلیت یک فولدر جدید به نام includes می‌سازیم.

myproject/
 |-- myproject/
 |    |-- boards/
 |    |-- myproject/
 |    |-- templates/
 |    |    |-- includes/    <-- here!
 |    |    |-- base.html
 |    |    |-- home.html
 |    |    |-- new_topic.html
 |    |    +-- topics.html
 |    +-- manage.py
 +-- venv/

درون آن، یک فایل به نام form.html ایجاد می کنیم.

templates/includes/form.html

{% load widget_tweaks %}

{% for field in form %}
  <div class="form-group">
    {{ field.label_tag }}

    {% if form.is_bound %}
      {% if field.errors %}
        {% render_field field class="form-control is-invalid" %}
        {% for error in field.errors %}
          <div class="invalid-feedback">
            {{ error }}
          </div>
        {% endfor %}
      {% else %}
        {% render_field field class="form-control is-valid" %}
      {% endif %}
    {% else %}
      {% render_field field class="form-control" %}
    {% endif %}

    {% if field.help_text %}
      <small class="form-text text-muted">
        {{ field.help_text }}
      </small>
    {% endif %}
  </div>
{% endfor %}

حالا فایل قبلی با نام new_topic.html را ویرایش می کنیم.

templates/new_topic.html

{% extends 'base.html' %}

{% block title %}Start a New Topic{% endblock %}

{% block breadcrumb %}
  <li class="breadcrumb-item"><a href="{% url 'home' %}">Boards</a></li>
  <li class="breadcrumb-item"><a href="{% url 'board_topics' board.pk %}">{{ board.name }}</a></li>
  <li class="breadcrumb-item active">New topic</li>
{% endblock %}

{% block content %}
  <form method="post" novalidate>
    {% csrf_token %}
    {% include 'includes/form.html' %}
    <button type="submit" class="btn btn-success">Post</button>
  </form>
{% endblock %}

همانطور که از نام آن مشخص است؛ آمده ایم و کدهای HTML مربوط به فرم را درون فایل قبلی include کرده‌ایم.

این یک روش مرسوم بوده و به راحتی می توانیم از فایل های HTML مختلف درون یکدیگر استفاده کنیم.

مثل همیشه نوبت به نوشتن تست می رسد:

boards/tests.py

# ... other imports
from .forms import NewTopicForm

class NewTopicTests(TestCase):
    # ... other tests

    def test_contains_form(self):  # <- new test
        url = reverse('new_topic', kwargs={'pk': 1})
        response = self.client.get(url)
        form = response.context.get('form')
        self.assertIsInstance(form, NewTopicForm)

    def test_new_topic_invalid_post_data(self):  # <- updated this one
        '''
        Invalid post data should not redirect
        The expected behavior is to show the form again with validation errors
        '''
        url = reverse('new_topic', kwargs={'pk': 1})
        response = self.client.post(url, {})
        form = response.context.get('form')
        self.assertEquals(response.status_code, 200)
        self.assertTrue(form.errors)

در کد بالا برای اولین بار از تگ assertIsInstance استفاده کرده ایم. با این کار یک ثابت فرم را در نظر گرفته و چک کرده ایم که یک NewTopicForm باشد. ضمناً در بخش آخر هم با استفاده از دستور self.assertTrue(form.errors) مطمئن می شویم که فرمِ ما، در صورت نامعتبر بودن دیتا، خطاهای مربوطه را نشان دهد.

ترجمۀ اختصاصی توسط تمدن