Download the PHP package distilleries/form-builder without Composer

Laravel 5 Form Builder

Based on laravel-form-builder (https://github.com/kristijanhusak/laravel-form-builder). I add default no editable form and few complex form fields. I add the validation system directly in the form part.

Table of contents

1. Installation
2. Basic usage
3. Type of form
   1. Form
   2. FormView
   3. FormValidator
   4. Use the validation client side
   5. Use the validation server side
   6. Check the rules on your controller
4. List of fields
   1. Input
   2. Choice
   3. Select
   4. Radio
   5. Checkbox
   6. Ajax
   7. Tag
   8. Upload
   9. TinyMce
   10. Textarea
   11. Button
   12. Address Picker
   13. Form
5. Controller
6. Troubleshooting

Installation

Add on your composer.json

run composer update.

Add Service provider to config/app.php:

And Facade (also in config/app.php)

Export the configuration:

Export the views (optional):

Basic usage

Creating form classes is easy. With a simple artisan command I can create form:

you create form class in path app/Forms/PostForm.php that looks like this:

You can add fields which you want when creating command like this:

And that will create form in path app/Forms/SongForm.php with content:

Type of form

Form

This is the base class from the package https://github.com/kristijanhusak/laravel-form-builder/tree/laravel-4. It use to add the fields and generate the form. Check the readme to know how use the component.

FormView

Extend the class Form to add a render with edit.

Use the view

To display an not editable form you can use form_view or form_rest_view. To display a specific field you can use form_widget_view.

In your form field you can add an option to not display this field on the view noInEditView.

For example in user form I add a choice to allow the password change. I don't want it in the view part.

Other way, you have a sub form and you don't want display some fields. You can specify an option call do_not_display_ plus the name of the field.

Example I have a customer form and this form use a sub form user. On the user form I don't want display the role choice:

FormValidator

Extend the FormView and add the system of validation.

The both table use the rules of laravel. If the $rules_update keep in null the $rules is use to validate the form.

Use the validation client side

By default I use jQuery validation Engine for the javascript validation. When you add a field you can add an option validation to add the javascript validation.

Use the validation server side

If you have a form User like this:

You can see the password field is not require on the update. I have an other specific rule. I want check if the email address is unique without if the email is use by your-self.

In the FormValidator you have two methods to get the update or general rules (getGeneralRules, getUpdateRules) . You can override them to return the good rules. That what I do in the UserForm. I override the method getUpdateRules to add the id of user for the validation.

Check the rules on your controller:

validateAndRedirectBack do only a redirect back with errors and Inputs.

List of fields

1 Input

Can be one of those type:

2 Choice

2.1 Select

2.2 Radio

2.3 Checkbox

2.4 Ajax

The tag component is base on select2.

Add the javascript on your bower components:

This component is use to search an element, or multiple elements.

This code is an example of controller method for the search:

Render editable:

Render not editable:

3 Tag

The tag component is base on select2.

Add the javascript on your bower components:

Render editable:

Render not editable:

4 Upload

The upload field use moximanager to link the elements with all the media components.

Render editable:

5 TinyMce

If you want use a rich content editor you can use tinymce.

Render editable:

Render not editable:

6 Textarea

The textarea work like a text field.

7 Button

You can add a button to submit your form or to back at the last page.

Render editable:

The button submit for the part not editable is never render.

8 Address Picker

The address picker base on http://logicify.github.io/jquery-locationpicker-plugin/

Add the javascript on your bower components:

Render editable:

Render not editable:

9 Form

You can add a form in a form. It pretty cool when you compose a big form to split it in multiple. For example I have a profile form with an address. I use the address on the profile form.

Render editable:

Render not editable:

Controller

You can use the trait Distilleries\FormBuilder\States\FormStateTrait to add in your controller the default methods use with the form.

Example: I created a UserForm class:

I created a controller app/Http/Controllers/FormController:

I add the controller on the route file :

Like you can see I inject the model and the form on the constructor. On the published template I add my style resources/views/vendor/form-builder/state/form.blade.php

That it you have your form link to the user model.

Troubleshooting

When you use the trait on your controller remove the route cache to be sure the routes are correctly generated.