symfony_black_02

Symfony2 – Dodawanie Klasy CSS do pola formularza zawieraj─?cego b??─?d

Case

Webdeveloper przygotowa?? nam HTML do strony zawieraj─?cej formularz.Przy b??─?dzie walidacji pola formularza. Pole to ma otrzyma─? dodatkowo klas─? CSS error. Je??eli to nie zostanie zaimplementowane, to kleint b─?dzie w??ciek??y, szef da po premii. A webdeveloper co ci─??? psd2html b─?dzie mie─? ci─? za Lamera!

#Rozwi─?zanie: 1 (Ugly)

Jest to proste, jednak wrzuca nam logik─? do template??w TWIG’a. Przez co tracimy na czytelno??ci plik??w TWIG. Templaty „tyj─?” przez ci─?g??e wklejanie tego samego kodu.

1
2
#form.html.twig
{% if form.pole.get('errors') is not empty %}
{{ form_widget(form.pole) }}
1
2
3
{% else %}
{{ form_widget(form.pole) }}
{% endif %}

Je??eli macie do zaimplementowania formularz, kt??ry posiada 15 p??l i ka??de z nich musi by─? wewn─?trz takiego warunku. To si??─? rzeczy zrobi si─? ba??agan i o b??─?d b─?dzie bardzo ??atwo.

#Rozwi─?zanie: 2 (pro)

Przy rozwi─?zaniu pro przychodzi nam z pomoc─? symfony2 form theming. A do celu mo??emy doj??─? w 3 prostych krokach:

  1. Utw??rz plik fields.html.twig w katalogu src/TwojBundle/Resources/views/Forms
  2. Edytuj plik fields.html.twig By wygl─?da?? w nast─?puj─?cy spos??b:
    1
    2
    3
    4
    5
    
    {% block text_widget %}
        {% set type = type|default('text') %}
        {% set attr = attr|merge({'class': attr.class|default('') ~ (errors|length > 0 ? ' error' : '') }) %}
        {{ block('field_widget') }}
    {% endblock %}

    Co robi ten plik? Wyt??umacz─? to linia po linii:

    1. Nadpisujemy blok text_widget, czyli ten kt??ry jest u??ywany do wy??wietlenia pola Text z formularza po wywo??aniu metody {{ form_widget(form.pole) }}.
    2. Ustawiamy zmienn─? type by okre??li─? jaki typ widgetu b─?dzie renderowany.
    3. Ustawiamy tablic─? atrybut??w przekazanych do widgeta. Dodaj─?─? poprzez filtr merge kolejny wpis do tablicy o ile w zmiennej errors znajduj─? si─? b??─?dy (sprawdza to wyra??enie ternarne).
    4. Wy??wietlamy blok widgetu.
    5. Zamykamy blok, kt??ry w??a??nie nadpisywali??my.
  3. Do templatea, kt??ry odpowiada za wy??wietlanie formularza, kt??ry mamy w??a??nie ostylowa─? musimy doda─? sk??rk─? (theme).
    1
    2
    
    #naszUberForm.html.twig
    {% form_theme form 'TwojBundle:Form:fields.html.twig' %}
    {{ form_widget(form.pole) }} …

O ile wykonali??my wszystkie kroki poprawnie to mo??emy cieszy─? si─? naszym super usability featurem z oznaczaniem p??l formularza, kt??re nie przesz??y walidacji dodatkow─? klas─? CSS. Dzi─?ki temu pola mog─? zmieni─? t??o na czerwone lub nada─? czerwony border.

Dokumentacja i Przyk??ady

Dodaj komentarz

Tw├│j adres e-mail nie zostanie opublikowany. Pola, kt├│rych wype┼énienie jest wymagane, s─ů oznaczone symbolem *

Mo┼╝esz u┼╝y─ç nast─Öpuj─ůcych tag├│w oraz atrybut├│w HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>