FOSUserBundle：覆盖 Twig 模板：添加 HTML 元素答案

【问题标题】：FOSUserBundle : Overriding a Twig template : adding HTML elementsFOSUserBundle：覆盖 Twig 模板：添加 HTML 元素
【发布时间】：2013-04-19 18:38:45
【问题描述】：

我正在使用 FOSUserBundle，我想在注册表单中添加一些 HTML 元素。实际上，我做到了，我可以在我的表单中看到添加到 User 类的属性。问题是我希望这些字段（名字、姓氏、出生日期等）能够获得我的 CSS 模板（引导程序）的外观。我通过覆盖登录页面成功地做到了这一点，因为 HTML 是显式声明的。我想对注册页面做同样的事情，但是我觉得很困惑，因为这里的内容是：

register.html.twig

{% 扩展“FOSUserBundle::layout.html.twig”%}

{% 块 fos_user_content %} {% 包括“FOSUserBundle:Registration:register_content.html.twig”%} {% endblock fos_user_content %}
register_content.html.twig

{% trans_default_domain 'FOSUserBundle' %}
{{ form_widget(form) }}

如何通过这段代码访问我在页面中看到的元素？

【问题讨论】：

投了反对票，因为您的问题实际上是：“我如何在 symfony2 中重复密码字段的标签上设置类？”

标签： symfony twig fosuserbundle

【解决方案1】：

试试这个

<div class="form-group {% if form.plainPassword.first.vars.errors %}has-error{% endif %}">
  <label class="col-lg-2 control-label">Password:</label>
  <div class="col-lg-5">
    {{ form_widget(form.plainPassword.first, {'attr': {'class': 'form-control input-lg', 'placeholder': 'Enter password', 'required': 'required'}}) }}
    {% for errorItem in form.plainPassword.first.vars.errors %}
      <label class="control-label has-error" for="{{ form.plainPassword.vars.id }}">{{ errorItem.message }}</label>
    {% endfor %}
  </div>
  <div class="col-lg-5">
    {{ form_widget(form.plainPassword.second, {'attr': {'class': 'form-control input-lg', 'placeholder': 'Enter password again', 'required': 'required'}}) }}
  </div>
</div>

它对我有用。

【讨论】：

【解决方案2】：

请在此处查看官方文档：“Overriding Forms”。您将需要创建一个自定义注册表单类型类，将其声明为服务，并告诉 FOSUserBundle 使用它。

要自定义模板，请参阅“Overriding Templates”。在您的情况下，您可以创建app/Resources/FOSUserBundle/views/Registration/register.html.twig。

【讨论】：

这正是我所做的，正如我所说，我可以看到我的新表单以及我添加的新属性。但我想要的是访问 HTML 代码以修改 CSS 属性。为 HTML 元素等添加类
Dylan，你可能没看过我说的。我正在使用 FOSUserBundle，并且我覆盖了默认的注册表单。看看上面的代码。表单由form_widget(form) 方法返回。没有任何 HTML 节点，因此我可以在它们上应用一些 CSS。
所以这与 FOSUserBundle 无关，而是一般的 symfony 形式。

【解决方案3】：

将form_widget(form) 替换为：

form_widget(form.username)
form_widget(form.email)
form_widget(form.plainPassword)
form_widget(form.myField)
form_rest(form)

在您的自定义 RegistrationFormType 类中，您可以向用户名字段添加一个类：

    $builder
        ->add('username', null, array('label' => 'form.username', 'translation_domain' => 'FOSUserBundle', 'attr' => array('class'=>'myClass')))

另请参阅有关手动渲染字段的表单文档：http://symfony.com/doc/current/book/forms.html#rendering-a-form-in-a-template

【讨论】：

我这样做了，但我仍然有关于密码字段的问题。这是它的代码：->add('plainPassword', 'repeated', array( 'type' => 'password', 'options' => array('translation_domain' => 'FOSUserBundle'), 'first_options' => array('label' => 'form.password'), 'second_options' => array('label' => 'form.password_confirmation'), 'invalid_message' => 'fos_user.password.mismatch', //'attr' => array('class' => 'label label-info') ));我想为两个密码字段添加一个类
但是当我添加类时，它不起作用，因为该类仅用于标签。此外，plainPassword 在这里是一个重复的字段。那么你认为我能做些什么来解决这个问题呢？
最简单的方法就是复制form_widget(form.plainPassword)生成的html，粘贴到表单模板中，随心所欲编辑，删除form_widget(form.plainPassword)。

【解决方案4】：

以下是我使用 FOSUserBundle、PUGXMultiUserBundle 和 BraincraftedBoostrapBundle 解决此问题的方法：

根据 FOSUserBundle 文档，添加一个 UserBundle 作为 FOSUser 的子级。创建包含以下内容的自定义 RegistrationFormType，其中仅添加 attr 和 label_attr 数组：

$builder
        ->add('email', 'email', array(
            'label' => 'form.email',
            'translation_domain' => 'FOSUserBundle',
            'attr' => array(
                'placeholder' => 'E-mail',
            ),
            'label_attr' => array(
                'class' => 'sr-only',
    )))
        ->add('username', null, array(
            'label' => 'form.username',
            'translation_domain' => 'FOSUserBundle',
            'attr' => array(
                'placeholder' => 'Username',
            ),
            'label_attr' => array(
                'class' => 'sr-only',
    )))
        ->add('plainPassword', 'repeated', array(
            'type' => 'password',
            'options' => array('translation_domain' => 'FOSUserBundle'),
            'first_options' => array('label' => 'form.password',
                'attr' => array(
                    'placeholder' => 'Password',
                ),
                'label_attr' => array(
                    'class' => 'sr-only',
                )),
            'second_options' => array('label' => 'form.password_confirmation',
                'attr' => array(
                    'placeholder' => 'Confirm password',
                ),
                'label_attr' => array(
                    'class' => 'sr-only',
                )),
            'invalid_message' => 'fos_user.password.mismatch',
        ))
;

注册表单模板如下所示：

<form action="{{ path('volunteer_registration') }}" method="POST" class="form-inline">
    {{ bootstrap_set_style('form-inline') }}
    {{ form_row(form.firstName) }}
    {{ form_row(form.lastName) }}
    {{ form_row(form.username) }}
    {{ form_row(form.email) }}
    <br/>
    {{ form_row(form.plainPassword) }}
    {{ form_row(form.plainPassword.second) }}
    {{ bootstrap_set_style('') }}

【讨论】：