-1

In a custom module (association), I have a form (MembershipStep3).
I'd like to use Twig template to handle form fields titles and need some advice about that.
In association.module, I have this code:

function association_theme()
{
  return [
    'association' => [
      'render element' => 'children',
    ],
    'membership_step3' => [
      'render element' => 'form',
      'template' => 'membership-step3',
    ],
  ];
}

In MembershipStep3.php, two almost identical fields are defined this way:

  public function buildForm(array $form, FormStateInterface $form_state) {

    $form = parent::buildForm($form, $form_state);
    $form['amap1'] = [
      '#type' => 'checkbox',
      '#title' => 'Je souhaite faire partie de l’AMAP (cas 1)',
    ];
    $form['amap2'] = [
      '#type' => 'checkbox',
    ];
    some other stuff...

And here is membership-step3.html.twig:

<form{{ attributes }}> {{ form.form_build_id }} {{ form.form_token }} {{ form.form_id }}

<div>

    {{ form.amap1 }}


    <br>
  {{ form.amap2 }}
    <label for="edit-amap2" class="option">
    Je souhaite faire partie de l’AMAP (cas 2)
    </label>

    {# Renders the rest of the form #} {{ form | without('amap1', 'amap2') }}

</div>

The result is:
enter image description here

The generated HTML is:

<div>

    <div class="js-form-item form-item js-form-type-checkbox form-item-amap1 js-form-item-amap1">
        <input data-drupal-selector="edit-amap1" type="checkbox" id="edit-amap1" name="amap1" value="1" class="form-checkbox">

        <label for="edit-amap1" class="option">Je souhaite faire partie de l’AMAP (cas 1)</label>
      </div>



    <br>
  <div class="js-form-item form-item js-form-type-checkbox form-item-amap2 js-form-item-amap2 form-no-label">
        <input data-drupal-selector="edit-amap2" type="checkbox" id="edit-amap2" name="amap2" value="1" class="form-checkbox">

        </div>

    <label for="edit-amap2" class="option">
    Je souhaite faire partie de l’AMAP (cas 2)
    </label>

As you can see, the label for amap2is outside of the div created by {{ form.amap2 }}.

How can I change my Twig template in order to have a result similar to amap1?

0

Drupal theming engine provides lots of layers. For example there's a twig template for the HTML wrapper (html.html.twig) then a template for the body (page.html.twig) which gets included in the HTML wrapper, then there's body elements which are included in the body template etc.

Forms are also same, there's a general Form wrapper, and when you print {{ form.amap1 }} in your membership-step3.html.twig this basically includes the checkboxes.html.twig, and passes it the $form['amap1'] array for the details to output.

The answer to your question is - I don't know why you're trying to do this. But the label is already output inside a different twig file, and this form wrapper twig is the wrong place to try and add in field/form element labels. All you need to do to make them look consistent is do what you did for amap1 - use the #title in the form array to specify the label. This way all you need in your membership-step3.html.twig file is:

<form{{ attributes }}> {{ form.form_build_id }} {{ form.form_token }} {{ form.form_id }}
  <div>{{ form }}</div>
</form> <!-- Don't forget the closing tag -->

Tip: Switch on Twig Debug to see where the templates came from straight inside the html output.

3
  • The reason why I'm trying to do this is that I'd like to have all my "language dependent" strings in a specific file (i.e. the Twig template) instead of embedded in the buildForm function of my form. – gbmapo Feb 17 '20 at 16:44
  • You can wrap "translateable" strings in t() function and translate them with the Drupal language manager. That's the way to do it if you want translateable strings? So you can do '#title' => t('Je souhaite faire partie de l’AMAP (cas 1)'), – Beebee Feb 17 '20 at 16:47
  • I know that. But I wanted to have the least possible of these in the code of the form. – gbmapo Feb 18 '20 at 7:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.