Zend Framework 2 : Extending Zend\Form to add Select, Multicheckbox, Email,Date, Textarea, and Radio element

By extending Zend\Form, we can add elements into form on the fly instead of manually instantiate the element(s).
For example, we want a form like this :

I will show you the way to do that. In Zend Framework 2, it’s very easy.

Let’s code :

namespace SampleModule\Form;
use Zend\Form\Form;

class SampleForm extends Form
{
    public function __construct($name = null)
    {
        parent::__construct("Sample Form");
        
        $this->setAttribute('method', 'post');
        
        $this->add(array(
            'name' => 'id',
            'attributes' => array(
                'type'  => 'hidden',
            ),
        ));
        
        $this->add(array(
            'name' => 'name',
            'attributes' => array(
                'type'  => 'text',
            ),
            'options' => array(
                'label' => 'Name',
            ),
        ));
        
        $this->add(array(
            'type' => 'Zend\Form\Element\Select',
            'name' => 'gender',
            'options' => array(
                'label' => 'Gender',
                'value_options' => array(
                    '1' => 'Select your gender',
                    '2' => 'Female',
                    '3' => 'Male'
                ),
            ),
            'attributes' => array(
                'value' => '1' //set selected to '1'
            )
        ));
        
        $this->add(array(
            'type' => 'Zend\Form\Element\MultiCheckbox',
            'name' => 'hobby',
            'options' => array(
                'label' => 'Please choose one/more of the hobbies',
                'value_options' => array(
                    '1' =>'Cooking',
                    '2'=>'Writing',
                    '3'=>'Others'
                ),
            ),
            'attributes' => array(
                'value' => '1' //set checked to '1'
            )
        ));
        
        $this->add(array(
            'type' => 'Zend\Form\Element\Email',
            'name' => 'email',
            'options' => array(
                'label' => 'Email'
            ),
            'attributes' => array(
                'placeholder' => 'you@domain.com'
            )
        ));
 
        $this->add(array(
            'type' => 'Zend\Form\Element\Date',
            'name' => 'birth',
            'options' => array(
                'label' => 'Birth'
            )
        ));
        
        $this->add(array(
            'name' => 'address',
            'attributes'=>array(
                'type'=>'textarea'  
            ),
            'options' => array(
                'label' => 'Address',
            ),
        ));
        
        $this->add(array(
            'type' => 'Zend\Form\Element\Radio',
            'name' => 'direction',
            'options' => array(
                'label' => 'Please choose one of the directions',
                'value_options' => array(
                    '1' => 'Programming',
                    '2' => 'Design',
                ),
            ),
            'attributes' => array(
                'value' => '1' //set checked to '1'
            )
        ));
        
        $this->add(array(
            'name' => 'submit',
            'attributes' => array(
                'type'  => 'submit',
                'value' => 'Go',
                'id' => 'submitbutton',
            ),
        ));
    }
    
    //IF YOU WILL WORK WITH DATABASE 
    //AND NEED bind() FORM FOR EDIT DATA, YOU NEED OVERRIDE
    //populateValues() FUNC LIKE THIS
    public function populateValues($data)
    {   
        foreach($data as $key=>$row)
        {
           if (is_array(@json_decode($row))){
                $data[$key] =   new \ArrayObject(\Zend\Json\Json::decode($row), \ArrayObject::ARRAY_AS_PROPS);
           }
        } 
        
        parent::populateValues($data);
    }
}

And remember, if you work with database, beside override populateValues() func in Form Class, don’t forget to encode array of hobby[] in Table Class by :

//common code to describe namespace, use here...

class SampleTable extends AbstractTableGateway
{
    protected $table = 'sampletable';
    public function __construct(Adapter $adapter){ /* common code here */ }
    
    public function saveSample(Sample $sample)
    {
        $data = array(
            'name' => $sample->name,
            'gender' => $sample->gender,
            'hobby' => \Zend\Json\Json::encode($sample->hobby),
            'email'   => $sample->email,
            'birth' => $sample->birth,
            'address' => $sample->address,
            'direction' => $sample->direction
        );
        $id = (int)$sample->id;
        if ($id == 0) {
            $this->insert($data);
        } else {
            if ($this->getSampleById($id)) {
                
                $this->update($data, array('id' => $id));
            
            } else {
                throw new \Exception('Form id does not exist');
            }
        }
    }
}

before save/update-ing the row, and value will be like : [1,2,3] etc.

Next step,add filter and validator. They should be in other class.

namespace SampleModule\Model;

use Zend\InputFilter\Factory as InputFactory;
use Zend\InputFilter\InputFilter;
use Zend\InputFilter\InputFilterAwareInterface;
use Zend\InputFilter\InputFilterInterface;

class Sample implements InputFilterAwareInterface
{
    public $id;
    public $name;
    public $gender;
    public $hobby;
    public $email;
    public $birth;
    public $address;
    public $direction;
    
    protected $inputFilter;

    public function exchangeArray($data)
    {
        $this->id        = (isset($data['id'])) ? $data['id'] : null;
        $this->name      = (isset($data['name'])) ? $data['name'] : null;
        $this->gender    = (isset($data['gender'])) ? $data['gender'] : null;
        $this->hobby     = (isset($data['hobby'])) ? $data['hobby'] : null;
        $this->email     = (isset($data['email'])) ? $data['email'] : null;
        $this->birth     = (isset($data['birth'])) ? $data['birth'] : null;
        $this->address   = (isset($data['address'])) ? $data['address'] : null;
        $this->direction = (isset($data['direction'])) ? $data['direction'] : null;
    }
    
    public function getArrayCopy()
    {
        return get_object_vars($this);
    } 
    
    public function setInputFilter(InputFilterInterface $inputFilter)
    {
        throw new \Exception("Not used");
    }

    public function getInputFilter()
    {
        if (!$this->inputFilter) {
            $inputFilter = new InputFilter();
            $factory     = new InputFactory();

            $inputFilter->add($factory->createInput(array(
                'name'     => 'id',
                'required' => true,
                'filters'  => array(
                    array('name' => 'Int'),
                ),
            )));

            $inputFilter->add($factory->createInput(array(
                'name'     => 'name',
                'required' => true,
                'filters'  => array(
                    array('name' => 'StripTags'),
                    array('name' => 'StringTrim'),
                ),
                'validators' => array(
                    array(
                        'name'    => 'StringLength',
                        'options' => array(
                            'encoding' => 'UTF-8',
                            'min'      => 5,
                            'max'      => 255,
                        ),
                    ),
                ),
            )));
            
            $inputFilter->add($factory->createInput(array(
                'name'     => 'gender',
                'validators' => array(
                    array(
                        'name'    => 'InArray',
                        'options' => array(
                            'haystack' => array(2,3),
                            'messages' => array(
                                'notInArray' => 'Please select your gender !'  
                            ),
                        ),
                    ),
                ),
            )));
            
            $inputFilter->add($factory->createInput(array(
                'name'     => 'hobby',
                'required' => true 
            )));
            
            
            $inputFilter->add($factory->createInput(array(
                'name'     => 'email',
                'validators' => array(
                    array(
                        'name'    => 'EmailAddress'
                    ),
                ),
            )));
            
            $inputFilter->add($factory->createInput(array(
                'name'     => 'birth',
                'validators' => array(
                    array(
                        'name'    => 'Between',
                        'options' => array(
                            'min' => '1970-01-01',
                            'max' => date('Y-m-d')
                        ),
                    ),
                ),
            ))); 
            
            $inputFilter->add($factory->createInput(array(
                'name'     => 'address',
                'required' => true,
                'filters'  => array(
                    array('name' => 'StripTags'),
                    array('name' => 'StringTrim'),
                ),
                'validators' => array(
                    array(
                        'name'    => 'StringLength',
                        'options' => array(
                            'encoding' => 'UTF-8',
                            'min'      => 5,
                            'max'      => 255,
                        ),
                    ),
                ),
            )));
            
            $inputFilter->add($factory->createInput(array(
                'name'     => 'direction',
                'required' => true  
            )));
             

            $this->inputFilter = $inputFilter;
        }

        return $this->inputFilter;
    }
}

Now, we can call it from controller :

namespace SampleModule\Controller;

use Zend\Mvc\Controller\AbstractActionController;
use SampleModule\Form\SampleForm;
use SampleModule\Model\Sample;
 
class TablesampleController extends AbstractActionController
{
    public function addAction()
    {
        $form  = new SampleForm();

        $request = $this->getRequest();
        if ($request->isPost()) {
            
            $sample = new Sample();
            $form->setInputFilter($sample->getInputFilter());
            $form->setData($request->getPost());

            if ($form->isValid()) {
                //SAVE TO DATABASE...
            }
        }
        
        return array(
            'form' => $form
        );
    }
}

In the view, we can call :

$form = $this->form;
$form->setAttribute('action', $this->url(
    'SampleModule/default',
    array(
        'action'     => 'add'
    )
));
$form->prepare();

echo $this->form()->openTag($form);
echo $this->formRow($form->get('name'));
echo $this->formRow($form->get('gender'));
echo $this->formRow($form->get('hobby'));
echo $this->formRow($form->get('email'));
echo $this->formRow($form->get('birth'));
echo $this->formRow($form->get('address'));
echo $this->formRow($form->get('direction'));
echo $this->form()->closeTag();

OR, if we’re a lazy programmer, we can use like this :

$form = $this->form;
$form->setAttribute('action', $this->url(
    'SampleModule/default',
    array(
        'action'     => 'add'
    )
));
$form->prepare();

echo $this->form()->openTag($form);
echo $this->formCollection($form);
echo $this->form()->closeTag(); 

Done !.

[UPDATE]
As Zend Framework version 2.0.2, for multicheckbox and radio, we must to call formElementErrors() in the view to show error if data form posted is not valid like this :

echo $this->formElementErrors($form->get('hobby')); //multicheckbox
echo $this->formElementErrors($form->get('direction')); //radio

[UPDATE] ( Zend Framework 2.0.3 )
The above code ( formElementErrors ) in multicheckbox and radio is unnecessary.

References :
1. http://stackoverflow.com/questions/12563181/zend-framework-2-standalone-forms
2. http://framework.zend.com/apidoc/2.0/classes/Zend.Form.Element.Select.html

About these ads