Events in Nette\Forms\Controls\BaseControl

I figured out some tasks is really difficult with actual Nette\Forms.

Model example task: Form's dependent input

We have a form with one select (lets call it foo) and second dependent input (lets call it bar). It can be TextInput , SelectBox, etc. Form also contains submit button, named save.

When foo is empty, we want form to contain no dependent item. When we choose some foo's option, dependent item is added to the form. It can be TextInput, SelectBox, etc., based on foo's value.

We want dependent input to work:

1. without any javascripts,
2. based on real actual value (dependent input should change when $form->setDefaults('foo' => ...) or $form['foo']->setDefaultValue(...) is called)
3. in right order of form elements (we want add dependent input BEFORE save button)

Bad idea solutions

A) Variable in URL

Like described in Planette article.

Problems:

1. Doesn't work with $form->setDefaults() & $input->setDefaultValue().
2. Doesn't work without javascript.
3. Can't dynamically remove / add elements, can only change values of existing elements.

B) Simple “Select” button

Should look like this:

protected function createComponentForm(){
	...

	$form->addSelect('foo', ...);
	$form->addSubmit('foo_change', 'Select Foo')
		->onClick[] = callback($this, 'changeFoo');
	if ($form['foo']->value) {
		$form->addSelect('bar', ...);
	}

	...
}


public function changeFoo(Button $button){
	// nothing here ;-)
}

Problems:

1. Doesn't work with $form->setDefaults() & $input->setDefaultValue(). It is imposible to use this form as editing form.

C) Session variable

Should look like this:

public function startup(){
	parent::startup();

	$this->formSession = $this->getSession($this->name . '-form');
}


protected function createComponentForm(){
	...

	$form->addSelect('foo', ...);
	$form->addSubmit('foo_change', 'Select Foo')
		->onClick[] = callback($this, 'changeFoo');
	if ($this->formSession->foo) {
		$form->addSelect('bar', ...);
	}

	...
}


public function changeFoo(Button $button){
	$values = $button->form->values;

	$this->formSession->foo = $values->foo;

	$this->redirect('this');
}

Problems:

1. Doesn't work with $form->setDefaults() & $input->setDefaultValue().
2. Clears all form's inputs (except main select)
3. What if I open same form in two different tabs?

D) Own Nette\Forms\Controls\BaseControl implementation

Yes, this is only one possible way in this moment. Not elegant.

Right idea solution (thanks to matej21)

Dependent inputs always depend on its “main input” value. So, we want ability to handle moment, when main input obtain some value.

So, Nette\Forms\Controls\BaseControl would implement events:

abstract class BaseControl extends Nette\ComponentModel\Component implements IControl {
	/** @var array */
	public $onChange;

	...

    public function setValue($value)
    {
        $this->value = $value;

        $this->onChange($this);

        return $this;
    }
}

And our form with dependent item can be implemented like this:

protected function createComponentForm(){
	...

	$form->addSelect('foo', ...)
		->onChange[] = callback($this, 'fooChanged');
	$form->addSubmit('foo_change', 'Select Foo');

	...
}


public function fooChanged(SelectBox $select){
	$form = $select->form;

	if ($form->values->foo) {
		$bar = new SelectBox('bar', ...);
		$form->addComponent($bar, ..., $form['save']);
	}
}

This solution:

1. Works without any javascripts. We can also add javascript & AJAX.
2. Works with $form->setDefaults('foo' => ...) or $form['foo']->setDefaultValue(...).
3. We are able add dependent input in order we want.

Thank you.

Last edited by nanuqcz (2014-01-13 03:18)