symfony / ux

Symfony UX initiative: a JavaScript ecosystem for Symfony
https://ux.symfony.com/
MIT License
853 stars 314 forks source link

[Live Component][Dependent Form] Embedding dependent form #1917

Open Kamhal24 opened 5 months ago

Kamhal24 commented 5 months ago

Hello, I'm struggling with UX dependent form component. I could not find anything in docs, but is it even possible to use dependent form and use that in other form that is not a component? So far it seems, that I need to have whole form as a component to have dependent form working. But maybe I'm missing something.

For example

OrderDispatchType.php
...
public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder = new DynamicFormBuilder($builder);
    $builder
        ->add('orderDispatchFrequency', EnumType::class, [
            'class' => OrderDispatchFrequency::class,
            'choice_label' => 'label',
        ])
        ->addDependent(
            'orderDispatchDay',
            'orderDispatchFrequency',
            static function (DependentField $field, ?OrderDispatchFrequency $dispatchFrequency): void {
                if (OrderDispatchFrequency::Weekly === $dispatchFrequency) {
                    $field->add(EnumType::class, [
                        'class' => OrderDispatchDay::class,
                        'choice_label' => 'label',
                        'required' => false,
                    ]);
                }
            }
        )
        ->addDependent(
            'oneTimeOrderDispatchDate',
            'orderDispatchFrequency',
            static function (DependentField $field, ?OrderDispatchFrequency $dispatchFrequency): void {
                if (OrderDispatchFrequency::OneTime === $dispatchFrequency) {
                    $field->add(DatePickerType::class);
                }
            }
        )
        ->add('orderDispatchTime', TimeType::class)
    ;
}
{# dispatchConfig.html.twig #}
<fieldset {{ attributes }}>
    {{ form_row(form.orderDispatchFrequency) }}

    <div>
        {% if orderDispatchConfig.oneTimeOrderDispatchDate is defined %}
            {{ form_row(form.oneTimeOrderDispatchDate) }}
        {% endif %}
    </div>

    <div>
        {% if orderDispatchConfig.orderDispatchDay is defined %}
            {{ form_row(form.orderDispatchDay) }}
        {% endif %}
    </div>

    {{ form_row(form.orderDispatchTime) }}
</fieldset>
OrderDispatchConfigComponent.php
...
#[AsLiveComponent(
    name: 'admOrderingFoodDispatchConfigType',
    template: 'components/twig/dispatchConfig.html.twig',
)]
final class OrderDispatchConfigComponent extends AbstractController
{
    use ComponentWithFormTrait;
    use DefaultActionTrait;

    protected function instantiateForm(): FormInterface
    {
        return $this->createForm(OrderDispatchType::class);
    }
}

and then use it in other form as

exampleType.php
...
public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        ->add('name', TextType::class)
        ->add('orderDispatchConfig', OrderDispatchType::class)
    ;
}
{# example.twig.html #}
...
{{ form(exampleForm) }}

Any help (or simple info, that this is not supported yet) would be highly appreciated. Thank you in advance.

smnandre commented 5 months ago

Probably more a question for the DynamicForms repository: https://github.com/SymfonyCasts/dynamic-forms

.. i'm not sure here and prefer not give you a wrong answer 🤷‍♂️

Kamhal24 commented 4 months ago

Thank you, I'll try to ask them. So far it looks like this is not possible (yet). If we found out solution, I'll post it here

Edit: issue on dynamic-forms repo https://github.com/SymfonyCasts/dynamic-forms/issues/29