小枝の「{{form_row()}}」にcssクラスを追加する方法を知りたいです。今のところ、私はこのコードを持っています:
{{ form_row(form.username, {'label' : "Login", 'attr': {'class': 'loginForm'}}) }}
...しかし、CSSクラス「loginForm」はHTMLコードでは使用されていません。
ありがとうございました :) !
form_rowの共通クラス(form_label、form_widget、form_errorsの1つのクラスを意味します)が必要な場合は、field_rowブロックをカスタマイズする必要があります。
この記事では、フォームフィールドをカスタマイズする方法について説明します。フォームレンダリングをカスタマイズする方法。これを行うにはいくつかの方法があります。
たとえば、方法2(フォームレンダリングをカスタマイズする方法:方法2)を使用しています。
{% extends 'form_div_layout.html.twig' %}
{% block field_row %}
{% spaceless %}
{% set class='' %}
{% if attr.class is defined %}
{% set class = 'class="' ~ attr.class ~ '"' %}
{% endif %}
<div {{ class }} >
{{ form_label(form, label|default(null)) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</div>
{% endspaceless %}
{% endblock field_row %}
私の答えはnni6と非常に似ていますが、attr配列全体を通過させることができます。
私のHTML構造はTwitterBootstrap用ですが、好きなものを使用できます。この例では、エラーがある場合はラッパーdivにもエラークラスを配置します。この部分は必須ではありませんが、Bootstrapを使用する場合に役立ちます。
{% extends 'form_div_layout.html.twig' %}
{% block field_row %}
{% spaceless %}
{% set field_row_classes = ['control-group'] %}
{% if errors|length > 0 %}
{% set field_row_classes = field_row_classes|merge(['error']) %}
{% endif %}
<div class="{{ field_row_classes|join(' ') }}">
{{ form_label(form, label|default(null)) }}
<div class="controls">
{{ form_widget(form, { 'attr' : attr|default({}) }) }}
{{ form_errors(form) }}
{% if help is defined %}
<p class="help-block">{{ help }}</p>
{% endif %}
</div>
</div>
{% endspaceless %}
{% endblock field_row %}
ここでの違いはform_widget
、attr
配列を使用して呼び出していることです(指定されている場合、デフォルトは{})
これで、フォームを通常どおりに設定できますが、カスタムクラスを通過できます。
{{ form_row(myentity.myproperty, { 'label' : 'mylabel', 'attr' : { 'class' : 'myclass' }}) }}
この投稿は更新が必要です!
Symfony 4.3以降、このrow_attr
オプションでは属性(および一部のクラス)を追加できます。それらのリンクを確認しましょう:
このコードを使用して、symfonyでブートストラップを構成します
{% block field_row %}
{% spaceless %}
<div class="control-group {% if errors|length > 0 %}error{% endif %}">
{{ form_label(form, label, { 'attr': { 'class': 'control-label' } }) }}
<div class="controls">
{{ form_widget(form, { 'attr' : attr|default({}) }) }}
{{ form_errors(form) }}
</div>
</div>
{% endspaceless %}
{% endblock field_row %}
ブロックを上書きせずにこれを達成する最も簡単な方法は次のとおりです。
{% set attr = {'class' : form.myElement.vars.attr.class ~ ' addedClasses...', 'style' : form.myElement.vars.attr.style ~ '; addedStyles...'} %}
{{- form_row(form.myElement, {'attr' : attr}) -}}