zf2 Zend 2 formCollection / FormElement Helper class

Question

Goodmorning to all,

i'm having some trouble with ZF2, i'm new to this Framework, so have mercy.... XDD well i wanted to use the function formCollection() to generate the form i customized the form collection class to add a wrapper ul and it's ok, now my problem is that if i customize formelement telling him to wrap the element inside a li, now the problem is that the label remain outside of the li tag, is there any way to solve it? without using formRow() or directly writing the html?

FormCollection.php

namespace Users\View\Helper;

use Zend\Form\ElementInterface;
use Zend\Form\View\Helper\FormCollection as BaseFormCollection;

class FormCollection extends BaseFormCollection {
    public function render(ElementInterface $element) {
        return '<ul>'. parent::render($element).'</ul>;
    }

}

FormElement.php

namespace Users\View\Helper;

use Zend\Form\ElementInterface;
use Zend\Form\View\Helper\FormElement as BaseFormElement;

class FormElement extends BaseFormElement {
    public function render(ElementInterface $element) {
       return  '<li>'. parent::render($element).'</li>';
    }
}

Resulted HTML

<form name="Register" method="post" action="/">
<ul>
    <label for="name">Full Name</label>
    <li>
        <input type="text" value="" name="name">
    </li>
    <label for="password">Password</label>
    <li>
         <input type="password" value="" required="required" name="password">
    </li>
</ul>

it's literally driving me nuts and probably is an easy thing to fix T_T

Thanks.

Answer 1

For <li><label></label><input></li> you must create new helper FormLabel.php:

namespace Users\View\Helper;

use Zend\Form\View\Helper\FormLabel as BaseFormLabel;

class FormLabel extends BaseFormLabel{

    public function openTag($attributesOrElement = null){
        return '<li>'.parent::openTag($attributesOrElement); 
    }
}

and update FormElement.php for сorrectly wrap submit:

namespace Users\View\Helper;

use Zend\Form\ElementInterface;
use Zend\Form\View\Helper\FormElement as BaseFormElement;

class FormElement extends BaseFormElement{

    public function render(ElementInterface $element){
        if($element->getAttribute('type') == 'submit'){
            return '<li>'.parent::render($element).'</li>';
        }else{
            return parent::render($element).'</li>';
        }
    }
} 

For <li><label></label></li><li><input></li> you need just create FormLabel.php:

namespace Users\View\Helper;

use Zend\Form\View\Helper\FormLabel as BaseFormLabel;

class FormLabel extends BaseFormLabel{

    public function openTag($attributesOrElement = null){
        return '<li>'.parent::openTag($attributesOrElement); 
    }

    public function closeTag(){
        return '</label></li>';    
   }
}

whithout any updates in yours FormElement.php

somethink like this... =) Hope it's help.

Answer 2

For Those who are stuck like me i customized the helper FormCollection (don't know if there's a better way to do X/)

put this class under

< module name> /src/ < module name >/View/Helper/FormCollection.php

/**
  * Zend Framework (http://framework.zend.com/)
  *
  * @link         http://github.com/zendframework/zf2 for the canonical source repository
  * @copyright    Copyright (c) 2005-2013 Zend Technologies USA Inc. (http://www.zend.com)
  * @license      http://framework.zend.com/license/new-bsd New BSD License
  * @CustomizedBy Fabio Tagliabue
  * @UpdaterWS    http://www.polarfoxlab.com  
 */

namespace Users\View\Helper;

use Zend\Form\ElementInterface;
use Zend\Form\View\Helper\FormCollection as BaseFormCollection;

class FormCollection extends BaseFormCollection {


     public function __invoke(ElementInterface $element = null, $wrap = true,$ExternalWrapper = '',$RowWrapper = 'div')
    {
        if (!$element) {
            return $this;
        }

        $this->setShouldWrap($wrap);

        return $this->render($element,$ExternalWrapper,$RowWrapper);
    }


    public function render(ElementInterface $element,$ExternalWrapper,$RowWrapper)
    {

        $renderer = $this->getView();
        if (!method_exists($renderer, 'plugin')) {
            // Bail early if renderer is not pluggable
            return '';
        }

        $markup           = '';
        $templateMarkup   = '';
        $escapeHtmlHelper = $this->getEscapeHtmlHelper();
        $elementHelper    = $this->getElementHelper();
        $fieldsetHelper   = $this->getFieldsetHelper();

        if ($element instanceof CollectionElement && $element->shouldCreateTemplate()) {
            $templateMarkup = $this->renderTemplate($element);
        }

        $markup .= $this->PrintWrapper($ExternalWrapper,true);

        foreach ($element->getIterator() as $elementOrFieldset) {
            $markup .= $this->PrintWrapper($RowWrapper,true);
            if ($elementOrFieldset instanceof FieldsetInterface) {
                $markup .= $fieldsetHelper($elementOrFieldset);
            } elseif ($elementOrFieldset instanceof ElementInterface) {
                $markup .= $elementHelper($elementOrFieldset);
            }
            $markup .= $this->PrintWrapper($RowWrapper,false);
        }
        $markup .= $this->PrintWrapper($ExternalWrapper,false);
        // If $templateMarkup is not empty, use it for simplify adding new element in JavaScript
        if (!empty($templateMarkup)) {
            $markup .= $templateMarkup;
        }

        // Every collection is wrapped by a fieldset if needed
        if ($this->shouldWrap) {
            $label = $element->getLabel();

            if (!empty($label)) {

                if (null !== ($translator = $this->getTranslator())) {
                    $label = $translator->translate(
                            $label, $this->getTranslatorTextDomain()
                    );
                }

                $label = $escapeHtmlHelper($label);

                $markup = sprintf(
                    '<fieldset><legend>%s</legend>%s</fieldset>',
                    $label,
                    $markup
                );
            }
        }
        return $markup;
    }
    /*
     * @param array wrapper keys are attribute + type is html tag
     * @param bool  open if need to open or close tag  
    */
    private function PrintWrapper($wrapper,$open=true)
    {
        $tag='';
        if(!empty($wrapper))
        {
            if($open) $tag='<';
            else $tag="</";
            foreach($wrapper as $attribute => $value)
            {
                if(strtolower($attribute)=="type")
                    $tag.="{$value}";
                else
                    $tag.=" {$attribute}='{$value}'";
            }
            $tag.='>';
        }

        return $tag;
    }
}

then go to < module name > /Module.php

and add this

public function getViewHelperConfig()   {
return array(
    'invokables' => array(
        'FormCollection' => '< module name >\View\Helper\FormCollection',
     )
);

}

now for using it in the form page call

echo $this->formCollection($form,true,'',array('type'=>'div','class'=>'form-group'));

the third parameter is ExternalWrapper and the fourth one is the RowWrapper just set the type for which tag you want to use and then the other property you want to assign :D

hope that this could help someone :D