Symfony 3：FosUserBundle使用自定義html類自定義注冊表單

Question

當我試圖自定義symfony 3項目的FosUSerBundle的登錄表單時，因此我查看了FosUSerBundle的默認樹枝模板以產生想法，然后我注意到該樹枝模板是通過vendor（ vendor/friendsofsymfony/user-bundle/Resources/views/Registration/register_content.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) }}

而且我注意到它調用{{ form_widget(form) }}來呈現表單。 因此我想知道如何調用此方法以及如何自定義視圖。 基本上，我想要表單的和html類，以便看起來像注冊管理員AdminLte的那個： https ://almsaeedstudio.com/themes/AdminLTE/pages/examples/register.html

現在，我要做的是創建此模板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 %}

擴展了app/Resources/FOSUSerBundle/views/layout.html.twig的以下內容：

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

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

{% set classes=''%}

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

這擴展了app/Resourses/views/base.html.twig模板：

<!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>

我要呈現的字段是默認字段，並且與通過默認FosUserBundle的管理員表單提供的字段完全相同。 我想弄亂html類，以便從上面提到的模板中獲得相同的外觀。

Answer 1

表單主題就是您所需要的。

您既可以創建表單主題，也可以僅在特定模板（例如注冊表單）中使用它：

{% 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) }}

或者，您可以在config.yml設置全局表單主題：

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

然后，您的表單主題應擴展symfony提供的默認div布局：

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

然后，您可以覆蓋此模板中的塊：

{# 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 -%}

Symfony 3：FosUserBundle使用自定義html類自定義注冊表單

問題描述

1 個解決方案

解決方案1
1 已采納 2017-04-11 16:22:27

Symfony 3：FosUserBundle使用自定義html類自定義注冊表單

問題描述

1 個解決方案

解決方案1 1 已采納 2017-04-11 16:22:27

解決方案1
1 已采納 2017-04-11 16:22:27