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 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 amap2
is outside of the div created by {{ form.amap2 }}
.
How can I change my Twig template in order to have a result similar to amap1
?