martes, 15 de octubre de 2013

Maquetación con Bootstrap 3 - new.html.twig - Parte III

Nuestra plantilla para editar registros se ve así:

{% extends '::base.html.twig' %}

{% block body -%}
    <h1>Cliente creation</h1>

    {{ form(form) }}

        <ul class="record_actions">
    <li>
        <a href="{{ path('cliente') }}">
            Back to the list
        </a>
    </li>
</ul>
{% endblock %}
Pero lo que necesitamos es darle estilos:

{% extends 'PetramasMainBundle::layout.html.twig' %}

{% block content %}
<h4>Nuevo Cliente</h4>
{{ form_start(form, {'attr': {'class': 'form-horizontal', 'role': 'form'}}) }}
    {{ form_errors(form) }}
    <div class="form-group{% if form.razonSocial.vars.errors[0].message is defined %} has-error{% endif %}">
        {{ form_label(form.razonSocial, null, {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
        <div class="col-sm-10">
            {{ form_widget(form.razonSocial, {'attr': {'class': 'form-control'}}) }}
            {% if form.razonSocial.vars.errors[0].message is defined %}
            <span class="help-block">
                {{ form.razonSocial.vars.errors[0].message }}
            </span>
            {% endif %}
        </div>
    </div>
    <div class="form-group{% if form.ruc.vars.errors[0].message is defined %} has-error{% endif %}">
        {{ form_label(form.ruc, null, {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
        <div class="col-sm-10">
            {{ form_widget(form.ruc, {'attr': {'class': 'form-control'}}) }}
            {% if form.ruc.vars.errors[0].message is defined %}
            <span class="help-block">
                {{ form.ruc.vars.errors[0].message }}
            </span>
            {% endif %}
        </div>
    </div>
    <div class="form-group{% if form.direccion.vars.errors[0].message is defined %} has-error{% endif %}">
        {{ form_label(form.direccion, null, {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
        <div class="col-sm-10">
            {{ form_widget(form.direccion, {'attr': {'class': 'form-control'}}) }}
            {% if form.direccion.vars.errors[0].message is defined %}
            <span class="help-block">
                {{ form.direccion.vars.errors[0].message }}
            </span>
            {% endif %}
        </div>
    </div>
    <div class="form-group{% if form.estado.vars.errors[0].message is defined %} has-error{% endif %}">
        {{ form_label(form.estado, null, {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
        <div class="col-sm-10">
            {{ form_widget(form.estado, {'attr': {'class': 'form-control'}}) }}
            {% if form.estado.vars.errors[0].message is defined %}
            <span class="help-block">
                {{ form.estado.vars.errors[0].message }}
            </span>
            {% endif %}
        </div>
    </div>
{{ form_end(form) }}
<a class="btn btn-info pull-right" href="{{ path('cliente') }}">Volver</a>
{% endblock %}

Ahora los errores se visualizan con estilos.