Button content in ZF2 forms

Question

How to edit the button content of a Button element (of a ZF2 form)? I can set a label, but i would like to insert some html code inside it.

    $this->add         


        

Answer 1

The FormButton view helper will escape the button HTML content automatically as @Sam has correctly mentioned.

The only way to avoid this would be to use a custom form button view helper. Rather than removing the escape functionality (as the button text content should be still be escaped); you could extend the view helper and add an additional option to allow you to render the html (I am assuming this is a bootstrap icon).

For example

use Zend\Form\View\Helper\FormButton as ZendFormButton;

class FormButton extends ZendFormButton
{

    public function render(ElementInterface $element, $buttonContent = null)
    {
        $content = (isset($buttonContent)) ? $buttonContent : $element->getLabel();
        $icon    = isset($element->getOption('icon')) ? $element->getOption('icon') : '';

        $escape = $this->getEscapeHtmlHelper();

        return $this->openTag($element) . $icon . $escape($content) . $this->closeTag();
    }

}

Then create an 'invokable' configuration entry using the button view helper's default registered name ('form_button') in the service manager. This will then mean our view helper will be used instead of the default Zend\Form\View\Helper\FormButton.

// Module.php
public function getViewHelperConfig()
{
    return array(
        'invokables' => array(
            'form_button' => 'MyModule\Form\View\Helper\FormButton',
        )
    );
} 

Lastly, change your button element specification to add a new 'icon' option

$this->add(array(
    'type' => 'Button',
    'name' => 'submit',
    'options' => array(
        'label'   => 'Modifica',
        'icon'    => '',
    ),
    'attributes' => array(
        'type'  => 'submit',
        'class' => 'btn btn-warning'
    )
));

Some other points

• If your using the translation for the button then the above code will remove that functionality; this can easily be added again (just look in the button view helper). I removed it to make the example clearer
• You could also extend this to add any number of other options to the element (perhaps the icon position before or after the button text). The view helper will just need to read this option and output the correct HTML.