Symfony UX LiveCollectionType提交空表单时字段不显示错误

问题现象 #

使用Symfony UX LiveCollectionType时，验证提示存在不一致问题：

• 添加集合项并输入1个字符，组件自动重渲染后，字段下方正常显示“值过短”的长度验证错误；
• 添加集合项后留空name字段提交，组件重渲染后，Profiler显示存在验证错误，通过Twig遍历错误能看到“This value should not be blank.”的消息，但对应字段无错误标识，也不显示错误提示。

相关代码片段 #

Live Component代码 #

// 其余代码省略

use ComponentWithFormTrait;
use LiveCollectionTrait;

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

#[LiveAction]
public function saveIt(): \Symfony\Component\HttpFoundation\RedirectResponse
{
    $this->submitForm();
    $form = $this->getForm();

    /** @var FormDataEntity $formEntity */
    $formEntity = $form->getData();
    $this->entityManager->persist($formEntity);
    $this->entityManager->flush();

    return $this->redirectToRoute('home');
}

ParentFormType代码 #

// 其余代码省略

$builder
    ->add('child', LiveCollectionType::class, [
        'entry_type' => ChildEmbeddedType::class,
        'error_bubbling' => false,
        'constraints' => [
            new Valid(),
        ],
    ])
;

ChildEmbeddedType代码 #

// 其余代码省略

->add('name', TextType::class, [
    'label' => 'name',
    'required' => true,
    'constraints' => new Length(
        min: 2,
    ),
]);

Twig模板代码 #

<div{{ attributes }}>
    {{form_start(form) }}
    {{form_end(form) }}
    <button type="button" data-action="live#action" data-live-action-param="saveIt" formnovalidate>submit</button>
</div>

已尝试的无效方法 #

• 手动验证表单
• 修改live#action配置
• 调整提交按钮位置
• 恢复默认表单主题
• 手动提取错误消息

解决方案 #

1. 给字段添加显式的NotBlank约束 #

仅依赖required=true是HTML层面的验证，提交按钮使用formnovalidate会跳过该验证，需在后端添加NotBlank约束确保错误触发并关联到字段：

// 修改ChildEmbeddedType的name字段配置
->add('name', TextType::class, [
    'label' => 'name',
    'required' => true,
    'constraints' => [
        new \Symfony\Component\Validator\Constraints\NotBlank(message: 'This value should not be blank.'),
        new \Symfony\Component\Validator\Constraints\Length(min: 2, minMessage: '值过短'),
    ],
]);

2. 修改LiveAction方法，验证失败时不跳转 #

原方法无论表单是否有效都会执行跳转，导致错误状态丢失。修改后验证失败时返回null，让组件重新渲染表单并保留错误：

#[LiveAction]
public function saveIt(): ?\Symfony\Component\HttpFoundation\RedirectResponse
{
    $this->submitForm();
    $form = $this->getForm();

    if (!$form->isValid()) {
        return null; // 验证失败，不跳转，重新渲染表单
    }

    /** @var FormDataEntity $formEntity */
    $formEntity = $form->getData();
    $this->entityManager->persist($formEntity);
    $this->entityManager->flush();

    return $this->redirectToRoute('home');
}

3. 确保表单字段错误正确渲染 #

在Twig模板中显式渲染集合子字段，确保错误消息被输出：

<div{{ attributes }}>
    {{ form_start(form) }}
        {% for entry in form.child %}
            {{ form_row(entry.name) }}
        {% endfor %}
        {{ form_widget(form.child.add) }}
    {{ form_end(form) }}
    <button type="button" data-action="live#action" data-live-action-param="saveIt" formnovalidate>submit</button>
</div>

原理说明 #

• 显式的NotBlank约束确保后端验证触发错误并将错误关联到对应字段，而非仅依赖HTML验证；
• 验证失败时不跳转，让LiveComponent保留表单错误状态并重新渲染；
• 显式渲染子字段确保Twig表单主题能正确输出字段的错误标识和消息。

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