web-dev-qa-db-fra.com

Comment ajouter un attribut à l'élément dans twig avant le rendu?

J'ai un modèle pour l'un de mes formulaires et je veux ajouter la classe css à l'élément avant de le rendre, mais comme j'imprime l'élément dans son ensemble, je ne sais pas comment modifier les attributs.

On m'a dit sur IRC de jeter un œil à la méthode de fusion mais jusqu'à présent pas de chance.

{% set submit_attributes = form.submit.attributes %}
{% submit_attributes.addClass('test') %}
{% form.submit.attributes|merge(submit_attributes) %}
{{ form.submit }}

ou

{% form.submit.attributes.addClass('test') %}
{{ form.submit }}
8theming
6
user21641

Il semble qu'en ce moment ce n'est tout simplement pas possible. J'ai créé un problème sur drupal.org pour cela. Peut-être qu'un jour il sera implémenté et que nous pourrons nous débarrasser définitivement du moteur phptemplate.

https://www.drupal.org/node/2567759

2
user21641

Voici ma solution pour ajouter un espace réservé à un champ de texte personnalisé utilisé pour entrer des termes de recherche dans un formulaire. Je n'ai pas pu utiliser element.attributes.setAttributes() car dans mon cas, la clé des attributs est #attributes.

{% set attr = form.search_api_fulltext['#attributes']|merge({'placeholder': 'Enter search term'|t}) %}
{% set search = form.search_api_fulltext|merge({'#attributes': attr}) %}
{{ search }}

Voici le même développé un peu pour plus de clarté:

{% set search = form.search_api_fulltext %}   
{% set attr = form.search_api_fulltext['#attributes'] %}
{% set attr = attr|merge({'placeholder': 'Enter search term'|t}) %}
{% set search = search|merge({'#attributes': attr}) %}

{{ search }}

Ou ajoutez une troisième fusion et fusionnez le champ dans le formulaire. Puis sortez le formulaire comme d'habitude:

{% set search = form.search_api_fulltext %}
{% set attr = form.search_api_fulltext['#attributes'] %} 
{% set attr = attr|merge({'placeholder': 'Enter search term'|t}) %}
{% set search = search|merge({'#attributes': attr}) %} 

{% set form = form|merge({'search_api_fulltext': search}) %}
{{ form }}
3
James Sorensen

Il est possible d'utiliser le filtre de fusion, je le fais avec beaucoup de succès sur les éléments de menu:

{% set item = item|merge({'attributes': item.attributes.addClass('new-class')}) %}

Je pense que vous devriez pouvoir faire quelque chose comme ça avec une imbrication plus profonde:

{% set form_submit = form.submit %}
{% set form_submit = form_submit|merge({'attributes': form_submit.attributes.addClass('test')}) %}
{% set form = form|merge({'submit': form_submit}) %}
{{ form.submit }}

Bien que vous puissiez tout aussi bien rendre form_submit et l'exclure du rendu avec form ailleurs.

2
holist

Eh bien, je ne sais vraiment pas si vous avez une raison particulière (comme tout garder sur le fichier HTML) pour le faire dans Twig, pas en pré-traitement, mais je peux vous donner un code qui a fonctionné pour moi en pré-traitement:

function hook_form_FORM_ID_alter(&$form, &$form_state) {
  $form['actions']['submit']['#attributes']['class'] = array('btn-primary form-control');
}

Ce code doit être dans le fichier your_theme.theme (comme l'ancien template.php pour Drupal 7).

2
pedrorocha

pour twig form add attribute:

  {# add a "foo" class to it #}
  {{ form_widget(form.name, { 'attr': {'class': 'foo'} }) }}
 for buttons 
 {{ form_widget(delete_form.submit, { 'attr': {'class': 'btn btn-danger btn-lg', 'type': 'button'} }) }}

=============================================

si votre question pour drupal alors le code est donné ci-dessous et ça marche pour moi.

function MY_MODULE_Name_form_alter(&$form, &$form_state, $form_id) {
    if ($form_id == 'user_register_form') {
      $form['actions']['submit']['#attributes'] = array('onclick' => 'if(!confirm_reg(this.id)){return false;}');   
    }
 }

et ce code ne doit pas être dans le fichier de thème, il est dans votre fichier modulename.module j'espère que cela vous aide ...

1
Kamal Oberoi

Ajouter à votre dossier de modèles

entrée - submit.html.twig

{%
set classes = [
   'test',
   'test2',
 ]
%}
<input{{ attributes.addClass(classes) }} />
1
No Sssweat

Tout le monde a tout à fait raison, la façon "drupale" de faire les choses est d'avoir hook_form_alter - de préférence hook_form_FORM_ID_alter et d'ajouter la classe avant qu'elle ne soit rendue.

Si vous cherchez un autre moyen - vous pouvez obtenir l'élément HTML du formulaire à partir de drupal en utilisant render ($ form ['submit']) (je suppose que c'est pour le bouton de soumission) donc

$submitHTML = render($form['submit']);

Vous pouvez ensuite transmettre ce code HTML à votre modèle TWIG en tant que variable.

$markup = array('markup' => $submitHTML);
$template = $twig->loadTemplate('myTwigFile.twig');
$output = $template->render($markup);

Dans votre modèle TWIG vous pouvez envelopper le HTML dans tout ce que vous voulez et simplement rendre le HTML brut que vous avez obtenu de drupal.

<div class="clearfix">
  {{markup[0]|raw}}
</div>

Notez que je fais référence au balisage du bouton de soumission comme premier élément du tableau de balisage - vous pouvez donc ajouter d'autres éléments de formulaire au même tableau.

J'ai omis du code de plomberie (configuration) - mais j'espère que vous avez l'idée.

0
JP Dippenaar