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

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;
}