嵌入控制器中的表单无法提交问题求助

我来帮你搞定这个问题！你遇到的核心问题是嵌入控制器的affectProduitsAction方法没有配置独立路由，所以表单提交时找不到对应的处理端点，自然就没反应了。咱们一步步来修改：

1. 给嵌入控制器方法添加路由 #

首先，给你的affectProduitsAction方法配置一个路由，这样表单就能明确知道提交到哪里。如果你用注解路由的话，直接在方法上方添加：

// AppBundle/Controller/PackController.php
/**
 * @Route("/pack/{id}/affect-produits", name="pack_affect_produits")
 */
public function affectProduitsAction(Pack $pack) {
    $request = $this->get('request_stack')->getMasterRequest();
    $form = $this->createForm(PackAffectProduitType::class, $pack);
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        // 这里写你的业务逻辑，比如保存关联的产品
        $em = $this->getDoctrine()->getManager();
        $em->persist($pack);
        $em->flush();

        // 提交成功后建议重定向，避免重复提交
        return $this->redirectToRoute('pack_show', ['id' => $pack->getId()]);
    }

    return $this->render('pack/affect_produits.html.twig', [
        'packForm' => $form->createView(),
        'pack' => $pack // 别忘了把pack变量传给模板，后面要用到
    ]);
}

注意：我在返回渲染的时候加了'pack' => $pack，因为模板里需要用pack的id来生成路由。

2. 修改模态框里的表单Action #

现在回到模态框的Twig模板，把表单的action属性指向刚才配置的路由，用path()函数生成正确的URL：

{{ form_start(packForm, {'action': path('pack_affect_produits', {'id': pack.id}) }) }}
<div class="modal-body">
    {# 你的表单内容 #}
    {{ form_widget(packForm) }}
</div>
<div class="modal-footer">
    <button class="btn btn-secondary" data-dismiss="modal" type="button">Annuler</button>
    <button class="btn btn-primary" type="submit">Affecter</button>
</div>
{{ form_end(packForm) }}

这里要注意：提交按钮的类型要改成type="submit"，你之前写的是type="button"，这也是提交没反应的一个小原因！普通button不会触发表单提交，必须用submit类型。

3. （可选）用AJAX优化提交体验（避免页面刷新） #

如果不想提交后整个页面刷新，可以用AJAX处理表单提交，这样模态框可以平滑关闭。在模态框的模板里添加一段JS：

<script>
$(document).ready(function() {
    $('#modalAffectProduit form').on('submit', function(e) {
        e.preventDefault(); // 阻止默认表单提交行为
        const $form = $(this);

        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: $form.serialize(),
            success: function() {
                // 提交成功后关闭模态框，刷新页面更新数据
                $('#modalAffectProduit').modal('hide');
                location.reload();
            },
            error: function(xhr) {
                // 如果表单验证失败，重新渲染表单显示错误
                $('#modalAffectProduit .modal-body').html(xhr.responseText);
            }
        });
    });
});
</script>

对应的，控制器里可以根据请求类型返回不同的响应：

if ($form->isSubmitted() && $form->isValid()) {
    // 业务逻辑...
    $em->flush();

    // 如果是AJAX请求，返回JSON成功响应
    if ($request->isXmlHttpRequest()) {
        return new JsonResponse(['success' => true]);
    }

    // 普通请求则重定向
    return $this->redirectToRoute('pack_show', ['id' => $pack->getId()]);
}

// 如果是AJAX请求且表单无效，只返回表单部分的HTML
if ($request->isXmlHttpRequest()) {
    return $this->render('pack/_affect_produits_form.html.twig', [
        'packForm' => $form->createView()
    ]);
}

// 普通请求返回完整模态框
return $this->render('pack/affect_produits.html.twig', [
    'packForm' => $form->createView(),
    'pack' => $pack
]);

这样用户体验会更流畅~

总结 #

• 给嵌入控制器方法配置独立路由是核心，让表单有明确的提交目标
• 确保提交按钮是type="submit"，否则无法触发表单提交
• 可选的AJAX处理能提升用户体验，避免页面刷新

内容的提问来源于stack exchange，提问作者mehdi