Question

使用Symfony3＆amp;＆amp;关于Ubuntu 16.04的PhpStorm.2016.3.2

我有一个用Twig制作的表格，这是我感兴趣的部分：

<div class="row">
    <div class="input-field col s12 validate" id="icon_telephone" type="tel">
          {{ form_errors(form) }}
          {% if form.vars.errors|length %}
            { form_row(
            form.authorPhone,
            form.authorPhone.vars|merge({'attr': {'autofocus': null}})
           )
          }}
          {% else %}
             {{ form_row(form.authorPhone) }}
          {% endif %}
     </div>
</div>

我想＆＃34;着色＆＃34; Red中的错误作为一个例子，没有实际使用Symfony的customize form rendering，这迫使我创建一个视图等。

所以我想知道是否有办法在没有工业化的情况下将错误变为红色。

Answer 1

制作红色是造型，所以你应该通过CSS做到这一点。将css文件添加到表单模板中，您可以自定义表单错误的呈现，如下所示：

{% block form_errors %}
    {% spaceless %}
        {% if errors|length > 0 %}
        <ul>
            {% for error in errors %}
                <li class="error-message">{{ error.message }}</li>
            {% endfor %}
        </ul>
        {% endif %}
    {% endspaceless %}
{% endblock form_errors %}

和css

.error-message{
   color: red;
}

Symfony doc文章：https://symfony.com/doc/current/form/form_customization.html#customizing-error-output

您的最终树枝模板如下所示：

<div class="row">
    <div class="input-field col s12 validate" id="icon_telephone" type="tel">
          {{ form_errors(form) }}
          {% if form.vars.errors|length %}
            { form_row(
            form.authorPhone,
            form.authorPhone.vars|merge({'attr': {'autofocus': null}})
           )
          }}
          {% else %}
             {{ form_row(form.authorPhone) }}
          {% endif %}
     </div>
</div>

<link rel="stylesheet" href="{{ asset('bundles/mybundle/css/style.css') }}" />

{% block form_errors %}
    {% spaceless %}
        {% if errors|length > 0 %}
        <ul>
            {% for error in errors %}
                <li class="error-message">{{ error.message }}</li>
            {% endfor %}
        </ul>
        {% endif %}
    {% endspaceless %}
{% endblock form_errors %}

您覆盖form_errors块，这是您拨打{{ form_errors(form) }}时symfony将使用的内容。

如果您不是最简单的解决方案，只需检查浏览器中的错误，找到正确的选择器并应用css而无需在树枝中自定义表单呈现。

对于样式表，在Resources/public/css下创建文件，然后执行app/console assets:install

如何呈现红色的表单错误？

1 个答案: