Skip to content

🔧 Component for Nette framwork which helps with creation of multistep forms.

License

Notifications You must be signed in to change notification settings

infinityloop-dev/multistep-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Multistep form

🔧 Component for Nette framwork which helps with creation of multistep forms.

Introduction

This component provides a simple way to create a multistep form. Handles swapping between steps, passing values from previous steps to current one and passing all combined values to final success callback. Also handles common edge cases, such as distinction between multiple instances of one form accessed by one client.

Installation

Install package using composer

composer require infinityloop-dev/multistep-form

Dependencies

How to use

  • Register \Infinityloop\MultistepForm\IMultiStepFormFactory as service in cofiguration file.
  • Inject it into component/presenter where you wish to use multi step form,
    • write createComponent method and use macro {control} in template file
  • Submit buttons for moving forward and backward are added automaticaly.

Example createComponent method

protected function createComponentMultistepForm() : \Infinityloop\MultistepForm\MultistepForm
{
    $multistepForm = $this->multistepFormFactory->create()
        ->setDefaults(['action' => \App\Enum\EAction::ACTION2])
        ->setSuccessCallback(function(array $values) {
            $this->model->save($values);
        });

    // first step
    $multistepForm->addFactory(function() : \Nette\Forms\Form {
        $form = new \Nette\Application\UI\Form();
        $form->addProtection();
        $form->setTranslator($this->translator);

        $form->addSelect('action', 'Akce', \App\Enum\EAction::ENUM)
            ->setRequired();

        return $form;
    }, __DIR__ . '/step1.latte');

    // second step
    $multistepForm->addFactory(function(array $previousValues) : \Nette\Forms\Form {
        $form = new \Nette\Application\UI\Form();
        $form->addProtection();
        $form->setTranslator($this->translator);

        if (\in_array($previousValues['action'], [\App\Enum\EAction::ACTION1, \App\Enum\EAction::ACTION2], true)) {
            $form->addText('action_1or2', 'Action 1 or 2')
                ->setRequired();
        } else {
            $form->addText('action_xyz', 'Action Xyz')
                ->setRequired();
        }
    });

    return $multistepForm;
}

Options

  • setDefaults(array)
    • default values for your form, all steps at once
  • addFactory(callable, ?string)
    • first argument is factory function from which the form is created
    • second argument is custom template path
      • the standard {control form} is used if no template is specified for current step
      • in custom template you can manualy render each step using {form form} ... {/form}
  • setSuccessCallback(callable)
    • callback where values from all steps are sent after submitting last step