understanding grid layout in zend

Question

I\'m a bit confused with designing forms in zend. I understood that I have the fields in my form class and the look should be done in the views.

In the index view wh

Answer 1

To print parts of Elements separately, there's several functions pre-defined in ZF. You can find all of them in \Zend\Form\ConfigProvider->getViewHelperConfig(), see here on Github.

In your case, your already using formLabel, formElement and formElementErrors.

These are handy for separte use if you have something like Currency, where you'd like a user to both fill in an amount and choose a currency but only use a single label, e.g.:

$this->formLabel($form->get('amount'));
$this->formElement($form->get('amount'));
$this->formElementErrors($form->get('amount'));
$this->formElement($form->get('currency'));
$this->formElementErrors($form->get('currency'));

An entire "form row" is made up out of:

• A label (optional)
• Element
• ElementErrors (if present after server-side validation)

So, as in this example you need the entire "amount" bit, you could shorten the above to:

$this->formRow($form->get('amount'));             // prints all elements for the row
$this->formElement($form->get('currency'));
$this->formElementErrors($form->get('currency'));

---

If you look closely through the linked ConfigProvider of 'zendframework/zend-form', you might've noticed there's also a form ViewHelper. This can be used to print an entire form in a single go, like so:

file: add-foo.phtml

    <?= $this->form($form) ?>

And that's it. It prints the whole form. Of course it uses the ZF defined ViewHelpers, as such also with that layout and classes applied.

If you wish, can take that config and override it in your own projects.

For example, your question code shows you add <div class="form-group"></div> around each row. Presumably for Bootstrap 4. To do this magically so you need not do:

    <div class="form-group">
        <?= $this->formRow($form->get('foo')) ?>
    </div>

We can adjust the formRow ViewHelper. Simply follow these steps:

1. Create a FormRow.php in your own project, e.g. module/Foo/src/View/Helper/FormRow.phtml
2. Make sure to extend it from ZF's FormRow and copy in the original (ZF) render function, like so:

    use Zend\Form\View\Helper\FormRow as ZendFormRow;

    class FormRow extends ZendFormRow
    {
        public function render(ElementInterface $element, $labelPosition = null)
        {
            // its content
        }
    }

3. We want to add a wrapper (form-group class div), so define it in the class, like so:

    class FormRow extends ZendFormRow
    {
        protected $inputRow = '<div class="form-group">%s</div>';
        // the other stuff
    }

4. At the bottom of the render function, you'll find the following code (before the else):

    if ($this->renderErrors) {
        $markup .= $elementErrors;
    }

Place after the above:

    $markup = sprintf(
        $this->inputRow,
        $markup,
    );

5. Register your new ViewHelper, using the same aliases as ZF so as to overwrite the values:

    'view_helpers'    => [
        'aliases'    => [
            'formrow'             => FormRow::class,
            'form_row'            => FormRow::class,
            'formRow'             => FormRow::class,
            'FormRow'             => FormRow::class,
        ],
        'factories'  => [
            FormRow::class           => InvokableFactory::class,
        ],
    ],

Done.

Now when you do $this->form($form) the FormElement ViewHelper from ZendFramework will receive your custom formRow ViewHelper when it its Factory does ->get('formRow'), as the config is overwritten to your own. As such, all rows will now automagically have the surrounding div.

---

Bit more than you asked for, but have fun ;) I'm gonna stop avoiding work now O:)