Updating a zone inside a form in Tapestry 5

Question

I've got a Zone inside a Form, the Zone is updated with a block containing input fields which I would like to bind to the parent Form. Unfortunately this doesn't seem to work quite as easily as I hoped as I am greeted with the following error message.

The Description component must be enclosed by a Form component. [at classpath:...Page.tml, line 100]

A simplified version of the source .tml is below.

<t:form t:id="editForm" t:context="item.id">
    <table>
        <tr>
            <th>Name</th>
            <td><t:textField value="item.name"/></td>
        </tr>
        <t:block t:id="block">
            <tr class="person">
                <th>Description</th>
                <td><t:textField t:id="description" value="item.description"/></td>
            </tr>
         </t:block>
         <t:zone t:id="itemZone" id="itemZone"/>
         <t:actionlink t:id="item" zone="itemZone">Click me!</t:actionlink>
    </table>
</t:form>

Is there a way to do the binding and if not what other alternatives are there?

Answer 1

This answer is outdated, you can add form elements using the usual zone functionality from Tapestry 5.2 on. This method still works as well, though.

Original answer, valid for Tapestry 5.0 and 5.1:

The FormInjector component allows you to add form elements to an exising form. You will have to write some custom JS to trigger the form injection, though.

In your TML:

<div t:type="FormInjector" t:id="injector" position="below" />

You can trigger the injection in your JS code like this:

$('theClientIdOfMyFormInjector').trigger();

You can find the injector DIV inside your form by its class name (myForm.down('div.t-forminjector')).

The component class:

@Inject
private Block formFieldsBlock;

@OnEvent(component = "injector")
Block loadExtraFormFields() {
    return this.formFieldsBlock;
}