Добавление форм при использовании фабрики Django modelformset_factory

Я начинаю использовать фабрику modelformset_factory от Django. Я хочу использовать его для добавления нескольких записей в мою модель Shift. Я хочу иметь 3 кнопки (может быть, 4)

  1. Добавьте пустую форму
  2. Копирование последней формы (когда нужно изменить только несколько вещей)
  3. Сохранить
  4. (Необязательно) Удалить запись

Я думал, что все это должно быть частью modelformset_factory, но узнал, что для этого мне нужен javascript. Вот моя попытка сделать это:

<script>
        $(document).ready(function () {
            $('.js-example-basic-single').select2();
        });
    </script>

    <script>
        $('#add-more-btn').click(function () {
            const newForm = $('#formset-container').children().last().clone();
            // Increment indices and update IDs/names in new form
            newForm.find('input, select').each(function () {
                const name = $(this).attr('name');
                if (name) {
                    const formIndex = parseInt(name.match(/form-\d+$/)[0].match(/\d+$/)[0]);
                    const newIndex = formIndex + 1;
                    $(this).attr('name', name.replace(/form-\d+$/, `form-${newIndex}`));
                    $(this).attr('id', name.replace(/form-\d+$/, `form-${newIndex}`));
                }
            });
            // Re-initialize Select2
            newForm.find('.js-example-basic-single').select2();
            newForm.appendTo('#formset-container');
        });
    </script>
{% extends 'base.html' %}

{% load static %}

{% block additional_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/form.css' %}">
{% endblock %}

{% block content %}

    <form method="post" id="formset">
        {% csrf_token %}
        {{ formset.management_form }}

        <div id="formset-container">
            {% for form in formset %}
                <div class="formset-form">
                    {{ form.as_p }}
                </div>
            {% endfor %}
        </div>
        <button type="button" id="add-more-btn">Add Shift</button>
        <button type="submit">Save shifts</button>
    </form>

Я получаю эту консольную ошибку: Uncaught TypeError: Cannot read properties of null (reading '0')

Относится к этой строке: const formIndex = parseInt(name.match(/form-\d+$/)[0].match(/\d+$/)[0]);

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

Вернуться на верх