Symfony表单渲染问题解决

在使用SymfonyPHP框架构建Web应用时,表单的创建和提交是常见的需求。本文将分享一个关于表单渲染问题及其解决方法的案例。

表单的创建

在创建表单时,可能会遇到各种情况,比如需要根据用户的选择显示或隐藏某些表单元素。以下是一个包含复选框和日期选择的表单示例代码:

$builder->add( 'hs_diploma', ChoiceType::class, array( 'mapped' => false, 'expanded' => true, 'multiple' => true, 'choices' => array( 'Diploma' => 'diploma', ), )) ->add( 'hs_dip_date', DateType::class, array( 'mapped' => false, 'format' => 'dd MMM y', 'label' => 'date:', 'years' => range(2017, 1960, -1), )) ->add( 'ged', ChoiceType::class, array( 'mapped' => false, 'expanded' => true, 'multiple' => true, 'choices' => array( 'G.E.D.' => 'ged_checked', ), )) ->add( 'ged_date', DateType::class, array( 'mapped' => false, 'format' => 'dd MMM y', 'label' => 'date:', 'years' => range(2017, 1960, -1), ));

HTML中,这些元素被放置在一个表格中,但问题在于日期标签和选择器被放置在了不同的行,而需要它们在同一行显示。

尝试在Twig模板中修复

Twig是一个灵活的模板引擎,允许自定义表单渲染方式。可以尝试在Twig模板中调整元素的排列,如下所示:

{{ form_widget(form.hs_diploma) }}{{ form_label(form.hs_dip_date) }} {{ form_widget(form.hs_dip_date) }}{{ form_widget(form.ged) }}{{ form_label(form.ged_date) }} {{ form_widget(form.ged_date) }}

然而,这种方法并没有解决问题。通过浏览器的开发者工具检查元素,发现每个复选框和日期选择器都被包裹在单独的标签中,而标签则在外部。

Symfony字段类型中设置属性

Symfony提供了多种字段类型,包括ChoiceType和DateType。可以通过设置字段类型的属性来解决渲染问题。以下是调整后的代码:

$builder->add( 'hs_diploma', ChoiceType::class, array( 'mapped' => false, 'expanded' => true, 'multiple' => true, 'choices' => array( 'Diploma' => 'diploma', ), 'attr' => array( 'style' => 'float:left', ), )) ->add( 'hs_dip_date', DateType::class, array( 'mapped' => false, 'format' => 'dd MMM y', 'label' => 'date:', 'label_attr' => array( 'style' => 'float:left;margin-left:8px', ), 'attr' => array( 'style' => 'float:left', ), 'years' => range(2017, 1960, -1), ));
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485