Symfony 3.4.20 和 Bootstrap 4 - 表单验证答案

【问题标题】：Symfony 3.4.20 and Bootstrap 4 - Form validationSymfony 3.4.20 和 Bootstrap 4 - 表单验证
【发布时间】：2019-01-03 02:34:50
【问题描述】：

我正在扩展 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) }}

【问题讨论】：

标签： twitter-bootstrap forms symfony

【解决方案1】：

如果您检查执行检查元素的类，您会看到默认情况下会在表单错误中添加无序列表。您必须覆盖原始模板才能添加您的 div。这里的 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 文档here

【讨论】：

【解决方案2】：

可能是因为错误块没有使用引导程序设置样式。如果您想对所有表单使用 bootstrap 4，您可以添加此配置：

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

【讨论】：