How add custom attribute in zend framework 2 using zend from - php

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.