2012-06-14 10 views
17

Voglio aggiungere una classe a determinati campi di input o label da symfony2.Symfony2 - FormBuilder - aggiungi una classe al campo e inserisci

posso fare qualcosa di simile nella mia forma entro Twig:

<div class="row"> 
    {{ form_label(form.subject) }} 
    {{ form_widget(form.subject, { 'attr': {'class': 'c4'} }) }} 
</div> 

che funziona bene. Ma devo impostare il modello per ogni modulo. E devo ridurlo al livello di uscita più basso possibile. Io in realtà voglio usare:

{{ form_widget(form) }} 

Così, stavo pensando, come avrei potuto aggiungere una classe CSS per l da qualche parte in:

class SystemNotificationType extends AbstractType { 
    public function buildForm(FormBuilder $builder, array $options) { 
     $builder ->add('subject', 'text', array('label' => 'Subject')) 
– 

ho pensato che questo potrebbe essere più utile, come ho solo devi apportare modifiche in un posto.

Quindi, come potrebbe essere fatto, o forse sto pensando nel modo sbagliato.

Qualsiasi aiuto sarebbe grande,

Molte grazie, Philipp

risposta

26

La classe di un campo fa parte del livello di presentazione del vostro applicazione, quindi è preferibile creare un tema di ramoscello per i moduli:

Creare un file fields.html.twig in Resources/views/Form del proprio bundle e definire come verrà formattato tua linea modulo, ad esempio:

{% block field_row %} 
<div class="row"> 
    {{ form_errors(form) }} 
    {{ form_label(form) }} 
    {{ form_widget(form, { 'attr': {'class': 'c4'} }) }} 
</div> 
{% endblock field_row %} 

Se si desidera personalizzare solo determinato campo, ad esempio il campo fieldName della forma formName, personalizzare la riga:

{% block _formName_fieldName_row %} 
<div class="row"> 
    {{ form_label(form) }} 
    {{ form_errors(form) }} 
    {{ form_widget(form, { 'attr': {'class': 'c4'} }) }} 
</div> 
{% endblock %} 

EDIT: personalizzare solo il campo:

{% block _formName_fieldName_widget %} 
    {% set type = type|default('text') %} 
    <input type="{{ type }}" {{ block('widget_attributes') }} value="{{ value }}" class="c4" /> 
{% endblock %} 

Poi in tutto il per m modelli che vogliono utilizzare questo tema aggiuntivo:

{% form_theme form 'MyBundle:Form:fields.html.twig' %} 

Questo è spiegato in dettaglio nel the cookbook

+0

Grazie, anche questo va bene. Non ho assolutamente notato questa parte nel ricettario. :) Ma devo ancora creare righe per ogni elemento nel ramoscello dei campi. Ma forse è così, come deve essere. – insertusernamehere

+0

@insertusernamequi ha aggiunto la personalizzazione del campo solo nella mia risposta. Non testato, ma dovrebbe funzionare. –

+0

Funziona alla grande. Grazie ancora. :) – insertusernamehere

40

Si può fare in questo modo:

class SystemNotificationType extends AbstractType { 
    public function buildForm(FormBuilder $builder, array $options) { 
     $builder->add('subject', 'text', array( 
      'label' => 'Subject', 
      'attr' => array(
       'class' => 'c4') 
      ) 
     ); 
    } 
} 
+0

Questo funziona correttamente. Ma aggiunge la classe a entrambi, l'etichetta e il campo di input. È possibile dire che l'etichetta e il campo ottengono classi diverse? – insertusernamehere

+0

Come aggiungere una classe 'c4' solo per il campo ma non per l'etichetta? – Mikhail

+0

Possibile soluzione di javascript su documento pronto: $ ('label.c4').removeClass ('c4'); – sglessard

6

Temi del Form


Ogni parte del modo in cui un form viene reso può essere personalizzata . Sei libero di modificare il modo in cui ogni forma "fila" esegue il rendering, modifica il markup utilizzato per il rendering degli errori o persino personalizzare il modo in cui un tag textarea deve essere visualizzato. Niente è off-limits e diverse personalizzazioni possono essere utilizzate in luoghi diversi.

Symfony utilizza i modelli per il rendering di ogni parte di un modulo, ad esempio etichette di etichette, tag di input, messaggi di errore e tutto il resto.

In Twig, ciascun modulo "frammento" è rappresentato da un blocco Twig.Per personalizzare qualsiasi parte del rendering di un modulo, è sufficiente ignorare il blocco appropriato.

In PHP, ogni modulo "frammento" viene reso tramite un singolo file di modello. Per personalizzare qualsiasi parte del rendering di un modulo, è sufficiente ridefinire il modello esistente creando uno nuovo.

Per capire come funziona, personalizzare il frammento form_row e aggiungere un attributo di classe all'elemento div che circonda ciascuna riga. Per fare questo, creare un nuovo file di modello che memorizzerà il nuovo markup:

{# src/Acme/TaskBundle/Resources/views/Form/fields.html.twig #} 
{% block form_row %} 
{% spaceless %} 
<div class="form_row"> 
{{ form_label(form) }} 
{{ form_errors(form) }} 
{{ form_widget(form) }} 
</div> 
{% endspaceless %} 
{% endblock form_row %} 

La forma form_row frammento viene usato durante il rendering maggior parte dei campi tramite la funzione form_row. A dire il componente form di utilizzare il nuovo frammento form_row sopra definito, aggiungere il seguente alla parte superiore del modello che rende la forma:

{# src/Acme/TaskBundle/Resources/views/Default/new.html.twig #} 
{% form_theme form 'AcmeTaskBundle:Form:fields.html.twig' %} 
{% form_theme form 'AcmeTaskBundle:Form:fields.html.twig' 
'AcmeTaskBundle:Form:fields2.html.twig' %} 
{{ form(form) }} 

Il tag form_theme (in Twig) "importazioni" i frammenti definiti nel dato modello e li usa durante il rendering del modulo. In altre parole, quando la funzione form_row viene chiamata più avanti in questo modello, utilizzerà il blocco form_row dal tema personalizzato (anziché il blocco form_row predefinito fornito con Symfony).

Il tema personalizzato non deve ignorare tutti i blocchi. Quando si esegue il rendering di un blocco che non è sovrascritto nel tema personalizzato, il motore di temi ricadrà sul tema globale (definito a livello di gruppo).

Se vengono forniti più temi personalizzati, questi verranno ricercati nell'ordine elencato prima di tornare al tema globale.

Per personalizzare qualsiasi parte di un modulo, è sufficiente eseguire l'override del frammento appropriato. Sapere esattamente quale blocco o file da sostituire è l'argomento della sezione successiva.

{# src/Acme/TaskBundle/Resources/views/Default/new.html.twig #} 

{% form_theme form with 'AcmeTaskBundle:Form:fields.html.twig' %} 

{% form_theme form with ['AcmeTaskBundle:Form:fields.html.twig', 
'AcmeTaskBundle:Form:fields2.html.twig'] %} 

Per ulteriori informazioni si veda il Come personalizzare il rendering in Symfony ricettario

globale Temi del Form


Nell'esempio precedente, si utilizza il form_theme helper (in Twig) per "importare" i frammenti del modulo personalizzato in th alla forma. È inoltre possibile dire a Symfony di importare personalizzazioni del modulo nell'intero progetto.

Ramoscello

Per includere automaticamente i blocchi personalizzati dal modello fields.html.twig creato in precedenza in tutti i modelli, modificare il file di configurazione dell'applicazione:

# app/config/config.yml 
    twig: 
    form: 
     resources: 
     - 'AcmeTaskBundle:Form:fields.html.twig' 

eventuali blocchi all'interno dei campi. Il modello html.twig è ora utilizzato globalmente per definire l'output del modulo.

Problemi correlati