ホーム最近公開の記事

中の人

【php symfony】FormTypeの同じフォームを複数回表示したい

公開: 2023-10-13 23:31
更新: 2023-10-14 00:00

534

php symfony4.x FormType ECCUBE4.1 form_widget

ごくごくたまーに同じフォームを複数表示したいときがあるんですが、そのやり方です

【広告】

指示するだけでトランクルームから荷物を配送できる宅トラ

知識ゼロで始める自分だけのSNS『Xserver SNS』

【特別なお客様向け】Rakuten最強プランのお申し込みで楽天ポイントプレゼントキャンペーン | 通信・エリア | 楽天モバイル

こんにちは！

中の人です

たまにフォームタイプのフォームを複数回表示したいときってありますよね？

ない？

ないかー(ﾟ∀ﾟ ) < ﾏｰｿﾝﾅﾅｲﾖﾈ

さぁいつも通り需要があろうがなかろうが紹介しますよ！

動作環境: ECCUBE4.1

どういうことか

ECCUBE4.1のマイページの会員情報編集画面を利用します

これらの入力フォームはtwigのform_widgetという関数で表示されています。

ここから、例えば会社名の入力フォームを2個表示したいとします。

準備

対象のテンプレートをapp以下にコピペします

📁 root/ec-cube/app/template/default/Mypage/change.twig

{# 👇 ソースからコピペ #}
{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% set body_class = 'mypage' %}

{% set mypageno = 'change' %}

{% form_theme form 'Form/form_div_layout.twig' %}

{% block javascript %}
    <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
{% endblock javascript %}

{% block main %}
    <div class="ec-layoutRole__main">
        <div class="ec-mypageRole">
            <div class="ec-pageHeader">
                <h1>{{ 'マイページ'|trans }}/{{ '会員情報編集'|trans }}</h1>
            </div>
            {% include 'Mypage/navi.twig' %}
        </div>
        <div class="ec-mypageRole">
            <div class="ec-editRole">
                <div class="ec-off1Grid">
                    <div class="ec-off1Grid__cell">
                        <form method="post" action="{{ url('mypage_change') }}" novalidate class="h-adr">
                            <span class="p-country-name" style="display:none;">Japan</span>
                            {{ form_widget(form._token) }}
                            <div class="ec-borderedDefs">
                                <dl>
                                    <dt>
                                        {{ form_label(form.name, 'お名前', { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error'}}">
                                            {{ form_widget(form.name.name01, { 'attr': { 'placeholder': '姓' }}) }}
                                            {{ form_widget(form.name.name02, { 'attr': { 'placeholder': '名' }}) }}
                                            {{ form_errors(form.name.name01) }}
                                            {{ form_errors(form.name.name02) }}
                                        </div>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        {{ form_label(form.kana, 'お名前(カナ)', { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error'}}">
                                            {{ form_widget(form.kana.kana01, { 'attr': { 'placeholder': 'セイ' }}) }}
                                            {{ form_widget(form.kana.kana02, { 'attr': { 'placeholder': 'メイ' }}) }}
                                            {{ form_errors(form.kana.kana01) }}
                                            {{ form_errors(form.kana.kana02) }}
                                        </div>
                                    </dd>
                                </dl>
                                {# 👇 こいつを2回表示したい #}
                                <dl>
                                    <dt>
                                        {{ form_label(form.company_name, '会社名', { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        <div class="ec-halfInput{{ has_errors(form.company_name) ? ' error' }}">
                                            {{ form_widget(form.company_name) }}
                                            {{ form_errors(form.company_name) }}
                                        </div>
                                    </dd>
                                </dl>
                                {# 以下省略 #}

ダメなパターン

で、company_nameフォームを複製してみます

📁 root/ec-cube/app/template/default/Mypage/change.twig

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% set body_class = 'mypage' %}

{% set mypageno = 'change' %}

{% form_theme form 'Form/form_div_layout.twig' %}

{% block javascript %}
    <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
{% endblock javascript %}

{% block main %}
    <div class="ec-layoutRole__main">
        <div class="ec-mypageRole">
            <div class="ec-pageHeader">
                <h1>{{ 'マイページ'|trans }}/{{ '会員情報編集'|trans }}</h1>
            </div>
            {% include 'Mypage/navi.twig' %}
        </div>
        <div class="ec-mypageRole">
            <div class="ec-editRole">
                <div class="ec-off1Grid">
                    <div class="ec-off1Grid__cell">
                        <form method="post" action="{{ url('mypage_change') }}" novalidate class="h-adr">
                            <span class="p-country-name" style="display:none;">Japan</span>
                            {{ form_widget(form._token) }}
                            <div class="ec-borderedDefs">
                                <dl>
                                    <dt>
                                        {{ form_label(form.name, 'お名前', { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error'}}">
                                            {{ form_widget(form.name.name01, { 'attr': { 'placeholder': '姓' }}) }}
                                            {{ form_widget(form.name.name02, { 'attr': { 'placeholder': '名' }}) }}
                                            {{ form_errors(form.name.name01) }}
                                            {{ form_errors(form.name.name02) }}
                                        </div>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        {{ form_label(form.kana, 'お名前(カナ)', { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error'}}">
                                            {{ form_widget(form.kana.kana01, { 'attr': { 'placeholder': 'セイ' }}) }}
                                            {{ form_widget(form.kana.kana02, { 'attr': { 'placeholder': 'メイ' }}) }}
                                            {{ form_errors(form.kana.kana01) }}
                                            {{ form_errors(form.kana.kana02) }}
                                        </div>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        {{ form_label(form.company_name, '会社名', { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        <div class="ec-halfInput{{ has_errors(form.company_name) ? ' error' }}">
                                            {{ form_widget(form.company_name) }}
                                            {{ form_errors(form.company_name) }}
                                        </div>
                                    </dd>
                                </dl>
                                {# 👆こいつを👇以下のように複製 #}
                                <dl>
                                    <dt>
                                        {{ form_label(form.company_name, '会社名', { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        <div class="ec-halfInput{{ has_errors(form.company_name) ? ' error' }}">
                                            {{ form_widget(form.company_name) }}
                                            {{ form_errors(form.company_name) }}
                                        </div>
                                    </dd>
                                </dl>
                                {# 以下省略 #}

挙動

マイページの会員情報編集画面にアクセスしてみます

会社名が追加されてますが、フォームが作成されていません。

symfonyでは、formTypeでフォームを作成した場合、idの重複があるので複数回のフォーム表示は許可されていないみたいです。

なので、一度表示したフォームは作成されないみたいです。

(わかりやすい記事探したんですが、見つけられませんでした。🙇‍♂️)

id重複してもいいから表示したいぜ

表示できるパターン

📁 root/ec-cube/app/template/default/Mypage/change.twig

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% set body_class = 'mypage' %}

{% set mypageno = 'change' %}

{% form_theme form 'Form/form_div_layout.twig' %}

{% block javascript %}
    <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
{% endblock javascript %}

{% block main %}
    <div class="ec-layoutRole__main">
        <div class="ec-mypageRole">
            <div class="ec-pageHeader">
                <h1>{{ 'マイページ'|trans }}/{{ '会員情報編集'|trans }}</h1>
            </div>
            {% include 'Mypage/navi.twig' %}
        </div>
        <div class="ec-mypageRole">
            <div class="ec-editRole">
                <div class="ec-off1Grid">
                    <div class="ec-off1Grid__cell">
                        <form method="post" action="{{ url('mypage_change') }}" novalidate class="h-adr">
                            <span class="p-country-name" style="display:none;">Japan</span>
                            {{ form_widget(form._token) }}
                            <div class="ec-borderedDefs">
                                <dl>
                                    <dt>
                                        {{ form_label(form.name, 'お名前', { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error'}}">
                                            {{ form_widget(form.name.name01, { 'attr': { 'placeholder': '姓' }}) }}
                                            {{ form_widget(form.name.name02, { 'attr': { 'placeholder': '名' }}) }}
                                            {{ form_errors(form.name.name01) }}
                                            {{ form_errors(form.name.name02) }}
                                        </div>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        {{ form_label(form.kana, 'お名前(カナ)', { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error'}}">
                                            {{ form_widget(form.kana.kana01, { 'attr': { 'placeholder': 'セイ' }}) }}
                                            {{ form_widget(form.kana.kana02, { 'attr': { 'placeholder': 'メイ' }}) }}
                                            {{ form_errors(form.kana.kana01) }}
                                            {{ form_errors(form.kana.kana02) }}
                                        </div>
                                    </dd>
                                </dl>
                                {# 👇 form_widgetで取得したhtmlを変数にセットしてしまう #}
                                {% set company_name_form = form_widget(form.company_name) %}
                                <dl>
                                    <dt>
                                        {{ form_label(form.company_name, '会社名', { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        <div class="ec-halfInput{{ has_errors(form.company_name) ? ' error' }}">
                                            {# 👇 rawフィルターを使ってhtmlを出力する #}
                                            {{company_name_form|raw}}
                                            {{form_errors(form.company_name)}}
                                        </div>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        {{ form_label(form.company_name, '会社名', { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        <div class="ec-halfInput{{ has_errors(form.company_name) ? ' error' }}">
                                            {# 👇 上記に同じ #}
                                            {{company_name_form|raw}}
                                            {{form_errors(form.company_name)}}
                                        </div>
                                    </dd>
                                </dl>
                                {# 以下省略 #}