在Client详情页通过Modal提交Equipment表单无响应问题求助

1. 绑定Equipment到当前Client #

Equipment必然属于某个Client，需要在创建时关联当前页面的Client实例：

修改EquipmentController的new方法 #

public function new(Request $request, Client $client, EntityManagerInterface $entityManager): Response
{
    $equipment = new Equipment();
    // 关联当前Client
    $equipment->setClient($client);
    
    $form = $this->createForm(EquipmentType::class, $equipment);
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        $entityManager->persist($equipment);
        $entityManager->flush();

        // 提交成功后重定向回原Client详情页
        return $this->redirectToRoute('app_client_show', ['id' => $client->getId()]);
    }

    return $this->render('equipment/new.html.twig', [
        'equipment' => $equipment,
        'form' => $form->createView(),
    ]);
}

更新Twig中的render调用 #

传递当前Client参数给控制器：

{{ render(controller('App\\Controller\\EquipmentController::new', { 'client': client })) }}

2. 处理模态框表单提交的页面跳转问题 #

默认表单提交会跳转页面，导致模态框无反馈，推荐用AJAX异步处理：

在Client的Show页面添加JS逻辑 #

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('#equipment_form');
    const modal = document.querySelector('#your-modal-id'); // 替换为你的模态框ID

    if (!form || !modal) return;

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        fetch(this.action, {
            method: this.method,
            body: new FormData(this),
            headers: { 'Accept': 'application/json' }
        })
        .then(res => {
            if (res.ok) {
                // 提交成功：关闭模态框并刷新页面
                modal.classList.remove('show');
                document.body.classList.remove('modal-open');
                document.querySelector('.modal-backdrop')?.remove();
                window.location.reload();
            } else {
                return res.text();
            }
        })
        .then(html => {
            if (html) {
                // 验证失败：替换模态框内容为带错误的表单
                modal.querySelector('.modal-body').innerHTML = html;
            }
        })
        .catch(err => console.error('提交失败:', err));
    });
});

适配控制器的AJAX响应 #

public function new(Request $request, Client $client, EntityManagerInterface $entityManager): Response
{
    $equipment = new Equipment();
    $equipment->setClient($client);
    
    $form = $this->createForm(EquipmentType::class, $equipment);
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        $entityManager->persist($equipment);
        $entityManager->flush();

        if ($request->isXmlHttpRequest()) {
            return new JsonResponse(['success' => true]);
        }
        return $this->redirectToRoute('app_client_show', ['id' => $client->getId()]);
    }

    $response = $this->render('equipment/new.html.twig', [
        'equipment' => $equipment,
        'form' => $form->createView(),
    ]);

    if ($request->isXmlHttpRequest()) {
        $response->headers->set('Content-Type', 'text/html');
    }

    return $response;
}

3. 确保表单错误信息正常显示 #

检查equipment/new.html.twig是否渲染了错误提示：

{{ form_start(form, { 'id': 'equipment_form' }) }}
    {{ form_errors(form) }} {# 全局错误提示 #}
    {{ form_row(form.your_field_name) }} {# 单个字段错误会自动渲染 #}
    <!-- 其他表单字段 -->
    <button type="submit" class="btn btn-primary">添加设备</button>
{{ form_end(form) }}

4. 排查CSRF令牌问题 #

若出现CSRF验证失败，可在render时显式传递请求上下文：

{{ render(controller('App\\Controller\\EquipmentController::new', { 'client': client }), { 'request': app.request }) }}

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