How add custom attribute in zend framework 2 using zend from

Question

I want to use angularJS in a zend framework project and in this project forms are generated using zend form. How can I add angular directive such as "ng-model" in the form elements but whenever i was trying to add this custom attribute in the zend-form elements (input, select etc) in view I am not getting this attribute ----

Here is my lead form

class LeadForm extends Form {

public function __construct() {

    parent::__construct('lead_form');

    $this->setAttributes(array(
        'action' => '',
        'method' => 'post',
        'name' => 'lead_form',
        'id' => 'lead_form',
        'class' => 'smart-form',
        'role' => 'form',
        'novalidate' => 'novalidate'
    ));

    $this->add(array(
        'name' => 'first_name',
        'type' => 'text',
        'options' => array(
            'label' => 'First Name',
        ),
        'attributes' => array(
            'class' => 'form-control validate[required,custom[onlyLetterSp]]',                
            'placeholder' => 'First name',                
            **'ng-model' => "first_name", // this attribute is not generating in view**
        ),            
    ));
}

}

Here is my controller which is calling this form and send to view for displaying

$createLeadForm = new \Admin\Form\LeadForm();

return new ViewModel(array(
            'form' => $createLeadForm,
));

Here is my code in view for showing element

<?php echo $this->formInput($this->form->get('first_name')); ?>

But after prinnting this form element i am getting see no "ng-model" in the input element

<input type="text" value="" placeholder="First name" class="form-control validate[required,custom[onlyLetterSp]]" name="first_name" >

I have set one attribute "ng-model " but this attribute is not appearing in the view

I want this element like (using zend form ) -

<input type="text" ng-model="first_name" value="" placeholder="First name" class="form-control validate[required,custom[onlyLetterSp]]" name="first_name" >

How can I do that using zend form and what need to change in this form and why i can not able to add custom attribute? please help me.

Thanks in Advance

Answer 1

You always can use data-ng-*:

$this->add(array(
    // ...
    'attributes' => array(
        // ...
        'data-ng-model' => 'first_name',
    ),            
));

Answer 2

Zend does not support other attribute if that attribute start other than data-* so for adding attribute for ng-* I had to modify the View Helper class

under this namespace ( Zend\Form\View\Helper ) inside the main library you will find a class named "AbstractHelper" and in this class you can get a method named "prepareAttributes" and here you have to change the following lines -

if (!isset($this->validGlobalAttributes[$attribute])
   && !isset($this->validTagAttributes[$attribute])
   && 'data-' != substr($attribute, 0, 5)
) 

to

if (!isset($this->validGlobalAttributes[$attribute])
   && !isset($this->validTagAttributes[$attribute])
   && 'data-' != substr($attribute, 0, 5)
   && 'ng-' != substr($attribute, 0, 3)
) 

see here I add

&& 'ng-' != substr($attribute, 0, 3)

so that ng-* attributes can be added using zend form

Thanks Again

Answer 3

This worked for me.

class FooForm extends Form
{

    public function __construct(LookupService $lookupService)
    {

        parent::__construct('fooForm');
        $this->setAttribute('novalidate', true);
    }

...
}

Answer 4

Try this: (data attribute)

ZF2:

public function __construct() {

    parent::__construct('lead_form');

    $this->setAttributes(array(
        'action' => '',
        'method' => 'post',
        'name' => 'lead_form',
        'id' => 'lead_form',
        'class' => 'smart-form',
        'role' => 'form',
        'novalidate' => 'novalidate'
    ));

    $this->add(array(
        'name' => 'first_name',
        'type' => 'text',
        'options' => array(
            'label' => 'First Name',
        ),
        'attributes' => array(
            'class' => 'form-control validate[required,custom[onlyLetterSp]]',
            'placeholder' => 'First name',
            'data-ng'     => json_encode(
                array(
                    'ng-model' => 'first_name',
                    'ng-123'   => '123',
                ), true
            )
        ),
    ));
}

Call this JS function after your HTML-Manipulation:

/**
 * ZF2 supports no custom attributs
 * this function converts data-ng attributes to ng attributes
 */
function addNgAttributes() {
    $('[data-ng]').each(function () {
        var ngdata = $(this).data('ng');
        var _this = this;
        $.each(ngdata, function (key, value) {
            $(_this).attr(key, value)
        });
    })
}

Answer 5

You should extend Zend\Form\View\Helper\FormFile and replace it via factory:

    namespace YourNamespace;    

    use Zend\Form\View\Helper\FormFile;

    class FormFile extends FormFile {

        /**
         * Attributes valid for the input tag type="file"
         *
         * @var array
         */
        protected $validTagAttributes = [
            'name' => true,
            'accept' => true,
            'autofocus' => true,
            'disabled' => true,
            'form' => true,
            'multiple' => true,
            'required' => true,
            'type' => true,
            'yourCustomAttribute' => true, //<--- here add Your attribute
        ];        

    }

and in module.php:

    public function getViewHelperConfig() {
    return array(
        'factories' => array(
            'Zend\Form\View\Helper\FormFile' => function($sm) {
                $helper = new \YourNamespace\FormFile();
                return $helper;
            }
        )
    );
}

then You can use yourCustomAttribute in form class as other attributes.