Загрузить дочернюю форму с Ajax в Symfony проект

Question

Я постараюсь правильно объяснить свою проблему:

FormType:

$builder
        ->add('q', TextType::class, [
            'label' => false,
            'required' => false,
            'attr' => [
                'class' => 'form-control mb-2'
            ]
        ])

        ->add('famille', EntityType::class, [
            'label' => false,
            'required' => false,
            'placeholder' => false,
            'class' => Famille::class,
            'choices' => $options['famille'],
            'expanded' => true,
            'multiple' => false,
        ])

        ->add('sousFamille', EntityType::class, [
            'label' => false,
            'required' => false,
            'class' => SousFamille::class,
            'choices' => $options['sousFamille'],
            'expanded' => true,
            'multiple' => true
        ]);
}


public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults([
        'data_class' => FiltreRecherche::class,
        'method' => 'GET',
        'csrf_protection' => false,
        'allow_extra_fields' => true,
        'famille' => [],
        'sousFamille' => [],
    ]);
}

public function getBlockPrefix()
{
    return '';
}

Контроллер:

$data = new FiltreRecherche();

    $form = $this->createForm(RechercheType::class, $data, [
        'famille' => $repoFamille->findFamille($idMarque),
        'sousFamille' => $repoSousFamille->findSousFamille($idMarque, $request->get('famille'))
    ]);
    $form->handleRequest($request);

Ajax Файл:

bindEvents() {

    this.form.querySelectorAll('input').forEach(input => {
        input.addEventListener('change', this.loadForm.bind(this))
    })
}


async loadForm() {
    const data = new FormData(this.form);
    const url = new URL(this.form.getAttribute('action') || window.location.href);
    const params = new URLSearchParams();
    data.forEach((value, key) => {
        params.append(key, value)
    })

    return this.loadUrl(url.pathname + '?' + params.toString());
}

async loadUrl(url) {
    const params = new URLSearchParams(url.split('?')[1] || '')
    params.set('ajax', 1)

    const response = await fetch(url.split('?')[0] + '?' + params.toString(), {
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })

    if (response.status >= 200 & response.status < 300) {
        const data = await response.json();
        // debugger
        this.content.innerHTML = data.content
        this.pagination.innerHTML = data.pagination

        params.delete('ajax')
        history.replaceState({}, '', url.split('?')[0] + '?' + params.toString())
    } else {
        console.error(response);

    }
}

И мой код в контроллере, когда у меня есть Ajax запрос:

 if ($request->get('ajax')) {
        return new JsonResponse([
            'content' => $this->renderView('produit/cardProduit.html.twig', ['produits' => $produits]),
            'pagination' => $this->renderView('produit/pagination.html.twig', ['produits' => $produits])
        ]);
    }

Это фильтр формы. У меня есть список «Famille», это нормально, но чтобы иметь список «SousFamille», мне нужен Famille ID, чтобы правильно завершить мой DQL -> findSousFamille. Итак, поле SousFamille является дочерним элементом Famille.

У меня уже есть Ajax, чтобы изменить список продуктов, когда я выбираю Famille. Как я могу отобразить дочернее поле «SousFamille», когда я выбираю 1 Famille с помощью radio btn. (w / Ajax) или, может быть, мне нужно изменить какой-то код в моем контроллере, я действительно не знаю ..

Спасибо за помощь!