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(array(
        'type' => 'Button',
        'name' => 'submit',
        'options' => array(
            'label'   => 'Modifica',
        ),
        'attributes' => array(
            'type'  => 'submit',
            'class' => 'btn btn-warning'
        )
    ));

Thanks

Ilowell

u gotta render a button with html content manually. If I'm not completely mistaken it's not possible with Zend\Form to have html content since it will all be escaped internally for security reasons. – Janeejaneen

Answer 1

You can simply use the disable_html_escape label's option. It works for me.

$this->add(array(
        'type' => 'Button',
        'name' => 'submit',
        'options' => array(
            'label' => '<i class="icon icon-foo"></i> Submit',
            'label_options' => array(
                'disable_html_escape' => true,
            )
        ),
        'attributes' => array(
            'type'  => 'submit',
            'class' => 'btn btn-success'
         )
    ));

Duntson

Answer 2

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'    => '<i class="icon icon-foo">',
    ),
    '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.

Brenn

Answer 3

If all you need is just an icon, using css is a much more simpler option, in form file you just add a custom css class to your button, and then in your style sheets add the icon to the class using before and content like this:

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

then in css:

.custom-btn-with-icon:before {
    content: '\uxf005'; // this is the unicode of the custom-char you need for your icon
    font-family: 'fontAwesome'; // and this is the icon font of your project
}

Drawers