duanqin9631 2017-04-11 16:07
浏览 51
已采纳

Symfony 3:FosUserBundle使用自定义html类自定义注册表单

As I was trying to customize a login form fro FosUSerBundle of my symfony 3 project, therefore I had a look on the FosUSerBundle's default twig templates in order to gen an idea, then I noticed that the twig template provided via vendor (vendor/friendsofsymfony/user-bundle/Resources/views/Registration/register_content.html.twig) has the following values:

{% trans_default_domain 'FOSUserBundle' %}

{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
    {{ form_widget(form) }}
    <div>
        <input type="submit" value="{{ 'registration.submit'|trans }}" />
    </div>
{{ form_end(form) }}

And I noticed that it calls a {{ form_widget(form) }} in order to render the form. so I want to know how this method is called and how can I customize the view. Basically I want the and the html classes of the form in order to look like the registration admin AdminLte's One: https://almsaeedstudio.com/themes/AdminLTE/pages/examples/register.html

Right now what I have done is to create this template app/Resources/FOSUSerBundle/views/Registration/register.html.twig:

{% extends "FOSUserBundle::layout.html.twig" %}

{% set classes='hold-transition register-page'%}

{% block fos_user_content %}

  {% trans_default_domain 'FOSUserBundle' %}

  <div class="register-box">
    <div class="register-logo">
        <h1>PhotoShare!</h1>
    </div>
    <div class="register-box-body">
      <p class="login-box-msg">Register a new membership</p>
      {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register')}) }}
        {{ form_widget(form) }}
        <div class="row">
          <div class="col-xs-4">
            <input type="submit" class="btn btn-primary btn-block btn-flat" value="{{ 'registration.submit'|trans }}" />
          </div>
        </div>
      {{ form_end(form) }}
  </div>

{% endblock fos_user_content %}

That extends app/Resources/FOSUSerBundle/views/layout.html.twig has the following content:

{% extends '::base.html.twig' %}

{% block title %}Photoshare!!{% endblock %}

{% set classes=''%}

{% block body %}
  {% block fos_user_content %}
  {% endblock fos_user_content %}
{% endblock body %}

That extends the app/Resourses/views/base.html.twig template:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        {% block stylesheets %}
          <link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/bootstrap/css/bootstrap.css')}}" >
          <link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/adminlte.css')}}" >
          <link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/skin-blue.css')}}" >
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />

        {% block javascriptsHeader %}

        {% endblock %}

    </head>
    <body class="{{ classes }}">
      {% block body %}
      {% endblock body %}

      {% block javascriptsFooter %}

      {% endblock javascriptsFooter %}
   </body>
</html>

The fields I want to render are the default and the very same that are provided via the default FosUserBundle's administrator form. I want to mess around with the html classes in order to achieve the same look from the template that is mentioned above.

  • 写回答

1条回答 默认 最新

  • drugs3550 2017-04-11 16:22
    关注

    A form theme is what you need.

    You can either create a form theme and use it only in specific templates like your registration form:

    {% form_theme form 'register-form-theme.html.twig' %}
    
    {% trans_default_domain 'FOSUserBundle' %}
    
    {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
        {{ form_widget(form) }}
        <div>
            <input type="submit" value="{{ 'registration.submit'|trans }}" />
        </div>
    {{ form_end(form) }}
    

    Or you can set a global form theme in config.yml:

    # Twig Configuration
    twig:
        # ...
        form_themes:
            - 'form-theme.html.twig'
    

    Your form theme then should extend the default div layout provided by symfony:

    {% extends 'form_div_layout.html.twig' %}
    

    You can then override the blocks from this template:

    {# app/Resources/views/form-theme.html.twig #}
    {% extends 'form_div_layout.html.twig' %}
    
    {%- block form_start -%}
        {% set attr = attr|merge({ 'class': (attr.class|default('') ~ ' custom classes')|trim }) %}
        {{ parent() }}
    {%- endblock form_start -%}
    
    {%- block form_row -%}
        <div class="custom classes">
            {{- form_label(form) -}}
            {{- form_widget(form) -}}
            {{- form_errors(form) -}}
        </div>
    {%- endblock form_row -%}
    
    {%- block form_widget_simple -%}
        {% set attr = attr|merge({ 'class': (attr.class|default('') ~ ' custom classes')|trim }) %}
        {{ parent() }}
    {%- endblock form_widget_simple -%}
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 求解答(matlab)
  • ¥30 ffmpeg库使用过程中遇到的问题
  • ¥15 pyqt5 中python如何通过Qtwebchannel主动发消息给web前端
  • ¥15 关于HTML中title获取xml内容的问题
  • ¥15 fanuc机器人PRIO083数字信号未复原错误,如何解决?
  • ¥20 如何为现有电路板增加远程控制功能
  • ¥15 C#点击按钮的时候的循环次数就是最后一次,如何是循环第几次的值?
  • ¥15 UE5打包失败,求解决
  • ¥15 请问STM32G431的CANOPEN协议函数怎么写
  • ¥15 graphpad prism 三因素重复测定报错