Symfony 3.4.20 и Bootstrap 4 - проверка формы

Question

Я расширяю форму регистрации пользователя FOSUserBundle. У меня все выглядит и работает так, как я хочу, за одним исключением - проверка. Появляются ошибки, но поля не показывают красные / зеленые границы при отправке для недействительных / допустимых входных данных, а сами ошибки представлены в неупорядоченных списках без стилизации, а не с элементами div с цветами ошибок. Есть ли простой способ заставить его выглядеть так, как я хочу? Код Twig моей формы:

{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
    <fieldset>
        <legend>Login Info</legend>
        <div class="form-group">
            {{ form_label(form.username) }}
            {{ form_widget(form.username, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.username) }}
        </div>
        <div class="form-group">
            {{ form_label(form.email) }}
            {{ form_widget(form.email, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.email) }}
        </div>
        <div class="form-group">
            {{ form_label(form.plainPassword.first) }}
            {{ form_widget(form.plainPassword.first, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.plainPassword.first) }}
        </div>
        <div class="form-group">
            {{ form_label(form.plainPassword.second) }}
            {{ form_widget(form.plainPassword.second, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.plainPassword.second) }}
        </div>
    </fieldset>

    <fieldset>
        <legend>Shipping Address</legend>
        <div class="form-group">
            {{ form_label(form.name) }}
            {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.name) }}
        </div>
        <div class="form-group">
            {{ form_label(form.line1) }}
            {{ form_widget(form.line1, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.line1) }}
        </div>
        <div class="form-group">
            {{ form_label(form.line2) }}
            {{ form_widget(form.line2, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.line2) }}
        </div>
        <div class="form-row">
            <div class="form-group col-6">
                {{ form_label(form.city) }}
                {{ form_widget(form.city, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.city) }}
            </div>
            <div class="form-group col-4">
                {{ form_label(form.state) }}
                {{ form_widget(form.state, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.state) }}
            </div>
            <div class="form-group col-2">
                {{ form_label(form.zipcode) }}
                {{ form_widget(form.zipcode, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.zipcode) }}
            </div>
        </div>
        <div class="form-group">
            {{ form_label(form.phone) }}
            {{ form_widget(form.phone, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.phone) }}
        </div>
    </fieldset>

    <small>We only ship within the US</small>

    <div>
        <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
    </div>
    {{ form_rest(form) }}
{{ form_end(form) }}

Answer 1

Может быть потому, что блоки ошибок не оформлены с помощью начальной загрузки.Если вы хотите использовать загрузчик 4 для всех форм, вы можете добавить эту конфигурацию:

twig:
    form_themes: ['bootstrap_4_layout.html.twig']

Answer 2

если вы проверите классы с помощью элемента inspect, вы увидите, что неупорядоченные списки добавляются по умолчанию в ошибках формы. Вам нужно переопределить исходный шаблон, чтобы добавить свои divs. Form_theme здесь позволяет вам внести изменения в одиншаблон вместо добавления шаблона в качестве ресурса в config.yml

{% form_theme form 'form/form_errors.html.twig' %}

    {{ form_errors(form.phone) }}

, затем в файле form_errors.html.twig

{# form_errors.html.twig #}
{% block form_errors %}
    {% spaceless %}
        {% if errors|length > 0 %}
        <ul>
            {% for error in errors %}
                <li>{{ error.message }}</li>
            {% endfor %}
        </ul>
        {% endif %}
    {% endspaceless %}
{% endblock form_errors %}

проверьте Symfony docs здесь