Using Fieldset in Nested Collection

[david-f]

Hi, I am trying to create a form composed of one fixed set of fields followed by possibly multiple sets of nested sibling forms. The code I have tried is this:

    class ListParmForm(Fieldset):
        legend = "Assigned License"
        first_name = fields.RegexField(
            r'^[A-Z][a-z -]+$',
            label="License name"
        )
        last_name = fields.CharField(
            label="License code",
            min_length=2,
            max_length=50
        )

    class ListParmCollection(FormCollection):
        default_renderer = FormRenderer(
            field_css_classes='row mb-3',
            label_css_classes='col-sm-3',
            control_css_classes='col-sm-9',
        )
        min_siblings = 1
        add_label = "Assigned License"
        list_parm = ListParmForm()

    class ValueEdFormCollection(FormCollection):
        default_renderer = FormRenderer(
            field_css_classes='row mb-3',
            label_css_classes='col-sm-3',
            control_css_classes='col-sm-9',
        )
        parm_form = ParmFormClass()
        list_parm_collection = ListParmCollection()

The ValueEdFormCollection is the topmost form in which the fixed set of fields is provided through the ParmFormClass. The possibly repeated sibling forms are provided through the ListParmCollection which contains sibling forms defined by ListParmForm.

To delineate the sibling forms on the page I thought I could make each sibling form be a Fieldset so that it would appear inside a surrounding box. However, while the Fieldset legend is displayed above the fields in the Fieldset, there is no surrounding box. I cannot figure out whether there is an error in my code or whether sibling/nested collections cannot be displayed as Fieldsets.

I would appreciate any suggestions or leads, thank-you,
David

[jrief]

Thanks for reporting. I will try out and use your snippet as one more example.

btw. did you check if the form is rendered inside a <fieldset> element?

[david-f]

Yes, the form appears to be rendered inside a fieldset element:

    .... multiple django-field-group's ....
    
    <django-field-group class="dj-required mb-3 row"><label for="id_parm_form.5543" class="col-sm-3">User 
        Name (243):</label>
        <div class="col-sm-9"><input type="text" name="5543" required form="id_parm_form" id="id_parm_form.5543"
                                     class="form-control">
            <div role="alert" class="dj-field-errors">
                <django-error-messages value_missing="This field is required."
                                       bad_input="Null characters are not allowed."></django-error-messages>
                <ul class="dj-errorlist">
                    <li class="dj-placeholder"></li>
                </ul>
            </div>
        </div>
    </django-field-group>

</div>

        <fieldset form="id_list_parm_collection.0.list_parm">

            <legend>Assigned License</legend>
            <div role="alert" class="dj-form-errors">
                <ul class="dj-errorlist">
                    <li class="dj-placeholder"></li>
                </ul>
            </div>

            <django-field-group class="dj-required mb-3 row"><label
                    for="id_list_parm_collection.0.list_parm.first_name" class="col-sm-3">License
                name:</label><input type="text" name="first_name" required
                                    form="id_list_parm_collection.0.list_parm" pattern="^[A-Z][a-z -]+$"
                                    id="id_list_parm_collection.0.list_parm.first_name" class="form-control">
                <div role="alert" class="dj-field-errors">
                    <django-error-messages value_missing="This field is required."
                                           type_mismatch="Enter a valid value."
                                           pattern_mismatch="Enter a valid value."
                                           bad_input="Null characters are not allowed."></django-error-messages>
                    <ul class="dj-errorlist">
                        <li class="dj-placeholder"></li>
                    </ul>
                </div>
            </django-field-group>

            <django-field-group class="dj-required mb-3 row"><label
                    for="id_list_parm_collection.0.list_parm.last_name" class="col-sm-3">License code:</label><input
                    type="text" name="last_name" maxlength="50" minlength="2" required
                    form="id_list_parm_collection.0.list_parm" id="id_list_parm_collection.0.list_parm.last_name"
                    class="form-control">
                <div role="alert" class="dj-field-errors">
                    <django-error-messages value_missing="This field is required."
                                           too_long="Ensure this value has at most 50 characters."
                                           too_short="Ensure this value has at least 2 characters."
                                           bad_input="Null characters are not allowed."></django-error-messages>
                    <ul class="dj-errorlist">
                        <li class="dj-placeholder"></li>
                    </ul>
                </div>
            </django-field-group>

        </fieldset>


        <button title="Remove" class="remove-collection btn btn-sm btn-outline-dark">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
                <path fill="none" d="M0 0h24v24H0z"/>
                <path d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z"/>
            </svg>
        </button>
    </django-form-collection>
    
    <template prefix="list_parm_collection" class="empty-collection">
        <django-form-collection sibling-position="${position}" min-siblings="1">
            <form name="list_parm_collection.${position}.list_parm"
                  id="id_list_parm_collection.${position}.list_parm"></form>
            <fieldset form="id_list_parm_collection.${position}.list_parm">
                <legend>Assigned License</legend>
                <div role="alert" class="dj-form-errors">
                    <ul class="dj-errorlist">
                        <li class="dj-placeholder"></li>
                    </ul>
                </div>
                <django-field-group class="dj-required mb-3 row"><label
                        for="id_list_parm_collection.${position}.list_parm.first_name" class="col-sm-3">License
                    name:</label><input type="text" name="first_name" required
                                        form="id_list_parm_collection.${position}.list_parm"
                                        pattern="^[A-Z][a-z -]+$"
                                        id="id_list_parm_collection.${position}.list_parm.first_name"
                                        class="form-control">
                    <div role="alert" class="dj-field-errors">
                        <django-error-messages value_missing="This field is required."
                                               type_mismatch="Enter a valid value."
                                               pattern_mismatch="Enter a valid value."
                                               bad_input="Null characters are not allowed."></django-error-messages>
                        <ul class="dj-errorlist">
                            <li class="dj-placeholder"></li>
                        </ul>
                    </div>
                </django-field-group>
                <django-field-group class="dj-required mb-3 row"><label
                        for="id_list_parm_collection.${position}.list_parm.last_name" class="col-sm-3">License
                    code:</label><input type="text" name="last_name" maxlength="50" minlength="2" required
                                        form="id_list_parm_collection.${position}.list_parm"
                                        id="id_list_parm_collection.${position}.list_parm.last_name"
                                        class="form-control">
                    <div role="alert" class="dj-field-errors">
                        <django-error-messages value_missing="This field is required."
                                               too_long="Ensure this value has at most 50 characters."
                                               too_short="Ensure this value has at least 2 characters."
                                               bad_input="Null characters are not allowed."></django-error-messages>
                        <ul class="dj-errorlist">
                            <li class="dj-placeholder"></li>
                        </ul>
                    </div>
                </django-field-group>
            </fieldset>
            <button title="Remove" class="remove-collection btn btn-sm btn-outline-dark">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
                     fill="currentColor">
                    <path fill="none" d="M0 0h24v24H0z"/>
                    <path d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z"/>
                </svg>
            </button>
        </django-form-collection>
    </template>
    <button title="Add" class="add-collection btn btn-sm btn-outline-dark">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
            <path fill="none" d="M0 0h24v24H0z"/>
            <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/>
        </svg>
        <span class="ms-1">Assigned License</span></button>
</div>

[jrief]

I just wanted to emulate this. I don't find the ParamFormClass.

However, while the Fieldset legend is displayed above the fields in the Fieldset, there is no surrounding box.

If you're using collections with siblings, have a look at the provided file formset/static/formset/css/collections.css. It adds borders to the siblings, so that they can be distinguished from each other.