Reactive Form Builder for Vue.js with Laravel Support

Overview

Dynamic Form Builder for Laravel with Vue.js

Create even the most complex forms with ease, using two-sided validation,
eloquent, nested elements, conditional logic, wizards and many more.

Laraform Community Edition (Vue.js)

Laraform is a premium library aiming to become the world's best form builder tool for web developers. It enhances collaboration by standardizing the creation of forms and increases efficiency by eliminating tons of repetitive work. Laraform comes with a lighter "Community Edition" and a full version which can be purchased at our website.

Features

Full features of Laraform:

  • Two-sided validation
  • 54 Laravel compatible frontend validators
  • Eloquent ORM support
  • Multiple file uploads
  • 34+ built-in elements
  • Nested elements
  • Repeatable elements
  • Translatable elements
  • Conditional logic
  • Form wizard
  • Localization
  • Theming
  • Extensibility

Examples

Browser Support

Laraform aims to support the latest versions of:

  • Google Chrome
  • Firefox
  • Apple Safari
  • Microsoft Edge
  • Opera
  • Safari iOS
  • Chrome, Firefox and Default Browser Android

Installation

Laraform is a full-stack library which comes with a separate frontend and backend library. This will install Laraform's Community Edition. For the full package please check out our website.

Install frontend library for Vue.js:

npm i laraform --save

Make sure you have the following peer dependencies installed:

npm i axios lodash moment vue --save

Install backend library for Laravel:

composer require laraform/laraform-laravel

Publish assets:

php artisan vendor:publish

When asked, choose: Laraform\LaraformServiceProvider. This will publish a config file at config/laraform.php.

Usage

Create a form at app\Forms\FirstForm.php:

<?php

namespace App\Forms;

class FirstForm extends \Laraform
{
  public function schema() {
    return [
      'hello_world' => [
        'type' => 'text',
        'label' => 'Hello',
        'default' => 'World'
      ]
    ];
  }
}

Pass the form to view in routes/web.php using app() function:

Route::get('/', function () {
  return view('welcome', [
    'form' => app('App\Forms\FirstForm')
  ]);
});

Set up rendering in view in resources/views/welcome.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel</title>

    <link rel="stylesheet" type="text/css" href="/css/app.css">
  </head>
  <body>
    <div id="app">
      {!! $form->render() !!}
    </div>

    <script src="/js/app.js"></script>
  </body>
</html>

Include Laraform in resources/js/app.js:

require('./bootstrap');

import Vue from 'vue'
import Laraform from 'laraform'

Vue.use(Laraform)

const app = new Vue({
  el: '#app',
})

Import theme in resources/sass/app.scss:

@import 'laraform/src/themes/default/scss/theme.scss';

If you are planning to use a CSS framework, like Bootstrap, make sure you include its theme file before Laraform's theme, so that Laraform can make use of the CSS framework's variables.

This is how it should look like in case of Bootstrap 4:

// Bootstrap 4's main theme file
@import 'bootstrap/scss/bootstrap';

// Laraform's theme file created for Bootstrap 4
@import 'laraform/src/themes/bs4/scss/theme.scss';

Laraform currently support Bootstrap 3 and Bootstrap 4. If you are using one of those also make sure to change the global theme in config/laraform.php to bs3 or bs4:

// ...
'theme' => 'bs4',

// ...

Compile your assets with:

npm run dev

Launch your site for example with:

php artisan serve

Now if you load the site you should see a very simple form with one single input. Check out our docs to learn how to create more advanced forms.

You can also download Examples to see more forms in action.

Feature Comparison

Full Version Community Edition
Backend support
Elements all checkbox, checkbox group, hidden, key, meta,
multiselect (native), password, radio, radio group, static,
textarea, text
File uploads -
Nested elements -
Custom elements
Translatable elements -
Localization
Custom locales
Validation
Validation rules all accepted, alpha, alpha_dash, alpha_num, between,
boolean, digits, digits_between, email, filled, in,
integer, ip, ipv4, ipv6, json, max, min, not_in, not_regex,
numeric, regex, required, size, string, timezone, url, uuid
Custom rules
Conditions -
Tabs -
Wizard -
Events & hooks
Buttons
Themes all all
Custom themes -
Custom styles
Custom layout
Code splitting -
Get Full version Try out Community Edition

Documentation

A complete Developer Guide and API Reference is available at Laraform website.

Issue Tracking

Laraform uses GitHub Issues for official bug tracking. Please follow our issue template to help us hunt down bugs as efficiently as possible.

Support & Contribution

If you have any questions about Laraform or interested in contributing, please drop us a line at [email protected]. We are happy for receiving feedbacks as well as growing our enthusiastic developer team.

License

Laraform Community Edition comes with an GPL license so you are free to use this library in your projects. For the full version check out the license at our website.

Comments
  • [QUESTION] Accessing Failed Validation Rules

    [QUESTION] Accessing Failed Validation Rules

    Prerequisites

    • [x] You've read the documentation and couldn't find an answer.
    • [x] Your question isn't already asked before.
    • [x] You filled in the entire issue template.

    Versions

    • PHP version:
    • Laravel version:
    • Laraform Vue package version and type:
    • Laraform Laravel package version:

    Description

    Is there any to access the failedRules property on the the validator instance?

    Additional Information

    GetErrors only gives me the failing messages in an ordered array, however I also need to know which Rules failed on which inputs.

    question 
    opened by mike2410 15
  • [QUESTION] Wizard with preview step

    [QUESTION] Wizard with preview step

    Prerequisites

    • [X] You've read the documentation and couldn't find an answer.
    • [X] Your question isn't already asked before.
    • [X] You filled in the entire issue template.

    Versions

    • PHP version: 7.4
    • Laravel version: 5.6
    • Laraform Vue package version and type: 1.2.9 Pro
    • Laraform Laravel package version: 1.2.2

    Description

    I have a multi step form and would like to have a preview of all filled fields in the last step before submitting the form. What is the best way todo this?

    <?php
    
    namespace App\Forms;
    
    class WizardForm extends \Laraform
    {
      public function wizard() {
        return [
          'personal_details' => [
            'label' => 'Personal details',
            'elements' => ['firstname', 'lastname'],
            'buttons' => [
              'previous' => false
            ]
          ],
          'contact_details' => [
            'label' => 'Contact details',
            'elements' => ['email', 'phone'],
            'labels' => [
              'previous' => 'Go back',
              'next' => 'Continue'
            ]
          ],
          'preview' => [
            'label' => 'Check before send',
            'elements' => ['preview']
          ]
        ];
      }
    
      public function schema() {
        return [
          'firstname' => [
            'type' => 'text',
            'label' => 'First name'
          ],
          'lastname' => [
            'type' => 'text',
            'label' => 'Last name'
          ],
          'email' => [
            'type' => 'text',
            'label' => 'Email'
          ],
          'phone' => [
            'type' => 'text',
            'label' => 'Phone'
          ],
          'preview' => [
            'type' => 'static',
            'content' => 'table with summary of firstname, lastname, email and phone'
          ],
        ];
      }
    }
    
    question 
    opened by basvandertogt 13
  • [BUG] Can not submit form

    [BUG] Can not submit form

    Prerequisites

    • [ X ] Able to reproduce the behaviour outside of your code, the problem is isolated to Laraform.
    • [ X ] Provided all the required dependencies to reproduce the bug (eg. form, component, model, migration - all with full class).
    • [ X ] Your issue isn't already filed.
    • [ X ] You filled in the entire issue template.

    Versions

    • PHP version: 7.2.5
    • Laravel version: 7.0
    • Laraform Vue package version and type: [email protected] community
    • Laraform Laravel package version: community 1.2.0

    Description

    Steps to Reproduce

    app.js

    require('./bootstrap');
    
    import Vue from 'vue'
    import Laraform from 'laraform'
    
    Vue.use(Laraform)
    

    Form

    
    namespace App\Forms;
    
    use App\Models\User\Project;
    
    class RegisterForm extends \Laraform
    {
        public $model = Project::class;
    
        public function schema()
        {
            return [
                'email' => [
                    'type' => 'text',
                    'placeholder' => 'Email address',
                    'rules' => 'required|email'
                ],
                'ip' => [
                    'type' => 'meta'
                  ],
            ];
        }
    
        public function buttons()
        {
            return [[
                'label' => 'Submit'
            ]];
        }
    }
    

    Route Route::get('/', function () { return view('welcome', [ 'form' => app('App\Forms\RegisterForm') ]); });

    Welcome blade

        <title>Laravel</title>
    
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    
        <!-- Styles -->
        <link rel="stylesheet" type="text/css" href="/css/app.css">
    </head>
    <body>
        <div id="app">
            {!! $form->render() !!}
          </div>
    
          <script src="/js/app.js"></script>
    </body>
    

    Migration Schema::create('projects', function (Blueprint $table) { $table->id(); $table->string('email'); $table->timestamps(); });

    app.scss

    // Fonts
    @import url('https://fonts.googleapis.com/css?family=Nunito');
    
    // Variables
    @import 'variables';
    
    // Bootstrap
    @import '~bootstrap/scss/bootstrap';
    
    @import 'laraform/src/themes/default/scss/theme.scss';
    

    Model

    <?php
    
    namespace App\Models\User;
    
    use Illuminate\Database\Eloquent\Model;
    
    class Project extends Model
    {
        protected $guarded = [];
    }
    

    Issue image

    bug stale 
    opened by mohammed-alfarra 12
  • [QUESTION] How to put custom backend validations?

    [QUESTION] How to put custom backend validations?

    Prerequisites

    • [x] You've read the documentation and couldn't find an answer.
    • [x] Your question isn't already asked before.
    • [x] You filled in the entire issue template.

    Versions

    • PHP version: 7.4
    • Laravel version: 7.4.0
    • Laraform Vue package version and type: 1.0.8 / community
    • Laraform Laravel package version: 1.0.4 / community

    Description

    I'm trying to find a way on how to tell the Form class (in the backend) to use a custom validation (custom Rule class). So far, I see how the frontend works but the backend itself is not very clear in the documentation.

    Also, it's kinda weird that the first page sells Laraform as "two-side validation" (Define your validation rules once and have them working on both frontend and backend.) and here is kinda weird, I'm not able to get this feature working on my end (basically I've to type the validations on my Laraform based class and also on my custom FormRequest class).

    Additional Information

    My FormRequest class looks like this :

    <?php
    
    namespace App\Http\Requests;
    
    use Illuminate\Foundation\Http\FormRequest;
    
    use App\Rules\AlphaSpaceRule;
    
    class MyFormRequest extends FormRequest
    {
        public function authorize()
        {
            return true;
        }
    
        public function rules()
        {
            return [
                'firstName' => ['required', new AlphaSpaceRule(), 'max:50'],
                'lastName' => ['required', new AlphaSpaceRule(), 'max:50'],
            ];
        }
    }
    

    And this is is my Laraform class:

    <?php
    
    namespace App\Forms;
    
    use Illuminate\Support\Arr;
    use Illuminate\Support\Str;
    use Laraform\Laraform;
    
    use App\Rules\AlphaSpaceRule;
    
    class DefaultForm extends Laraform
    {
        public $endpoint = '/submit';
    
        public $component = "default-form";
        public $class = "default-form";
        public $labels = false;
        public $formErrors = false;
        public $columns = [
            'element' => 12,
            'label' => 12,
            'field' => 12
        ];
    
        public function schema()
        {
            return [
                'firstName' => [
                    'type' => 'text',
                    'placeholder' => 'First Name',
                    'floating' => 'First Name',
                    'rules' => ['required', new AlphaSpaceRule(), 'max:50'], // Here my custom validation doesn't work
                ],
                'lastName' => [
                    'type' => 'text',
                    'placeholder' => 'Last Name',
                    'floating' => 'Last Name',
                    'rules' => ['required', new AlphaSpaceRule(), 'max:50'], // Here my custom validation doesn't work
                ],
            ];
        }
    }
    

    Any idea what I'm doing wrong here or how I could get this custom rule validated and also how to avoid to write the validations twice?

    question 
    opened by TonnyORG 11
  • [BUG]

    [BUG]

    I have tried 2 new fresh installs of Laravel 6.x and 7.x and followed your instructions to the letter to install & setup laraform and all I get is a blank screen when I invoke 127.0.0.1:8000, it looks to me as though vue is not being loaded but cannot be sure, this looks like a great product for a new project I have but cannot move on to the pro version unless I know it functions as described...during the setup I execute npm i axios lodash moment vue --save and I get the following warnings....

    npm WARN [email protected] requires a peer of axios@^0.18 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    Could this be the problem? Thank you

    bug more information needed 
    opened by bigfella59 10
  • List, not showing default values

    List, not showing default values

    I am defining a form in the backend, following the documentation I have

            '_props->todo'=> [
                'type'=> 'list',
                'label'=> 'To-do',
                'element'=> [
                  'type'=> 'text',
                  'placeholder'=> 'Write here...'
                ],
                'default'=> [
                  'Write docs',
                  'Create unit tests',
                  'Set up npm',
                ]
            ]
    

    as part of the array to be returned by the schema() function.

    The control gets draw in the screen, but empty, that is the default values are not shown.

    Any idea ?

    opened by gmartinez 10
  • [QUESTION] Is a BS5 theme coming?

    [QUESTION] Is a BS5 theme coming?

    Prerequisites

    • [x] You've read the documentation and couldn't find an answer.
    • [x] Your question isn't already asked before.
    • [x] You filled in the entire issue template.

    Versions

    • PHP version: 8.0
    • Laravel version: 8.32.1
    • Laraform Vue package version and type: 1.2.12 / pro
    • Laraform Laravel package version: 1.2.4 / pro-->

    Description

    Bootstrap 5 stable has been released, I wonder if a BS5 version is coming anytime soon for Laraform. The reason why I ask is that we are in the middle of refreshing our website image and we are evaluating the pros and cons of BS4 vs BS5.

    Additional Information

    References: https://blog.getbootstrap.com/2021/05/05/bootstrap-5/

    question stale 
    opened by TonnyORG 9
  • [BUG] Wizard steps are marked as enabled and completed when data is sent from the backend

    [BUG] Wizard steps are marked as enabled and completed when data is sent from the backend

    Prerequisites

    • [x] Able to reproduce the behaviour outside of your code, the problem is isolated to Laraform.
    • [x] Provided all the required dependencies to reproduce the bug (eg. form, component, model, migration - all with full class).
    • [x] Your issue isn't already filed.
    • [x] You filled in the entire issue template.

    Versions

    • PHP version: 7.4
    • Laravel version: 8.x
    • Laraform Vue package version and type: 1.2.11/pro
    • Laraform Laravel package version: 1.2.3/pro

    Description

    If data is passed (for example for prefil the form fields with some default values), then this is triggered:

          // load data if available
          if (this.form.data && !_.isEmpty(this.form.data)) {
            this.load(this.form.data)
          }
    

    Then:

          load(data) {
            if (!_.isEmpty(this.wizard$)) {
              this.wizard$.enableAllSteps(). // I think this should not be happening, so the user MUST fill each step first, otherwise the user is allowed to jump across steps without even having fill the previous ones. This basically breaks the default "steps" behavior.
            }
            ...
    

    and enableAllSteps maks the steps as completed without perform any sort of validation:

          /**
           * Enables all steps.
           *
           * @public
           * @returns {void}
           */
          enableAllSteps() {
            _.each(this.steps$, (step$) => {
              step$.enable()
              step$.complete()
            })
          },
    

    And this is how the complete() method looks like within the wizard step mixin:

          /**
           * Completes the step.
           *
           * @public
           * @returns {void}
           */
          complete() {
            if (this.completed) {
              return
            }
    
            this.completed = true
    
            this.fire('complete')
          },
    

    Steps to Reproduce

    Just pass any data through the backend for a field present within the form:

    $form->setData(['name' => 'Anonymous']);
    

    Expected behavior:

    Do not mark any step as completed, also do not enable steps as they should be enabled based on user progress.

    Imgur

    Actual behavior:

    All the steps are enabled and marked as completed.

    Imgur

    Additional Information


    bug stale 
    opened by TonnyORG 9
  • [BUG] TextElement field does not consistently re-trigger validation on mobile

    [BUG] TextElement field does not consistently re-trigger validation on mobile

    Prerequisites

    • [X] Able to reproduce the behaviour outside of your code, the problem is isolated to Laraform.
    • [X] Provided all the required dependencies to reproduce the bug (eg. form, component, model, migration - all with full class).
    • [X] Your issue isn't already filed.
    • [X] You filled in the entire issue template.

    Versions

    • PHP version: 7.4.5
    • Laravel version: 7.0
    • Laraform Vue package version and type: 1.2.2
    • Laraform Laravel package version: 1.2

    Description

    When using Chrome browser on an Android device, if I load a form with required text fields and try to submit without filling in the fields, it correctly displays the validation error. But if I then type something in those fields it does not re-trigger the validation and the error remains. However there are certain actions which do trigger the revalidation, for example:

    • when you type a space
    • if you select an autocomplete word suggestion
    • if you tap out of the field, then back in again and type another character.

    Steps to Reproduce

    As above, on a mobile device (tested on Android Chrome) load a form with a required TextElement field. Do not fill in the field. Attempt to submit the form, see validation error. Then fill in the field.

    Expected behavior:

    On typing in the field, validation should be re-triggered, the error should be removed, and form can be submitted.

    Actual behavior:

    Error is not removed unless triggered by certain conditions as described above.

    Additional Information

    I originally noticed this problem on my own form which is in a wizard format but can reproduce it on the Laraform website examples.

    My form uses 'submit|step|change' for validateOn

    bug 
    opened by tomduncs 9
  • [QUESTION] Testing: Recommended approach

    [QUESTION] Testing: Recommended approach

    Prerequisites

    • [x] You've read the documentation and couldn't find an answer.
    • [x] Your question isn't already asked before.
    • [x] You filled in the entire issue template.

    Versions

    • PHP version:
    • Laravel version:
    • Laraform Vue package version and type:
    • Laraform Laravel package version:

    Description

    Normally I test features hitting the endpoints with the corresponding verb and the payload: $this->post('/some/endpoint/', ["my" => "data"]);

    However, with auto processing this approach seems to fall flat (I don't want to disable it and handle every request in the specific controller)

    Additional Information

    I'm curious how you'd approach this with auto processing in mind, any suggestion greatly appreciated!

    question 
    opened by mike2410 9
  • [QUESTION] Fillable array not respected on insert

    [QUESTION] Fillable array not respected on insert

    Prerequisites

    • [X] You've read the documentation and couldn't find an answer.
    • [X] Your question isn't already asked before.
    • [X] You filled in the entire issue template.

    Versions

    • PHP version: 7.4.5
    • Laravel version: 5.6
    • Laraform Vue package version and type: 1.2.8
    • Laraform Laravel package version: 1.2.2

    Description

    I have the field club_id in my Laraform which should not be inserted to the database. However i do receive the error:

    SQLSTATE[42S22]: Column not found: 1054 Unknown column 'club_id' in 'field list' (SQL: insert into registrations (club_id, seminar_id, theory_course, discount, salutation, initials, first_name, middle_name, last_name, maiden_name, birthdate, street, house_nr, house_nr_supplement, postcode, city, country, email, phone, mobile, remarks, conditions, updated_at, created_at) values (4, 1, 0, 0, 0, B, Bas, van der, Togt, , , Adres, 13, , 1234AB, Plaats, NL, [email protected], 0241234567, 0612345678, bla bla, true, 2020-10-05 12:05:27, 2020-10-05 12:05:27))

    <?php
    
    namespace App\Forms;
    
    use App\Club;
    use App\Registration;
    use Laraform\Laraform;
    
    class RegistrationForm extends Laraform
    {
        public $component = 'registration-form';
    
        public $model = Registration::class;
    
        public function wizard() {
            return [
                'location_time' => [
                    'label' => 'Locatie & tijd',
                    'elements' => ['club_id', 'seminar_id', 'theory_course', 'discount'],
                    'buttons' => [
                        'previous' => false
                    ]
                ],
                'person_details' => [
                    'label' => 'Persoonsgegevens',
                    'elements' => ['salutation', 'name', 'birthdate'],
                ],
                'address_details' => [
                    'label' => 'Adresgegevens',
                    'elements' => ['address'],
                ],
                'contact_details' => [
                    'label' => 'Contactgegevens',
                    'elements' => ['email', 'phone'],
                ],
                'finish' => [
                    'label' => 'Voltooi',
                    'elements' => ['remarks', 'conditions'],
                ]
            ];
        }
    
        public function schema() {
            $clubs = Club::pluck('name', 'id');
    
            return [
                'club_id' => [
                    'type' => 'select',
                    'label' => 'Cursuslocatie',
                    'items' => $clubs,
                    'rules' => ['required']
                ],
                'seminar_id' => [
                    'type' => 'select',
                    'label' => 'Gewenste dagen',
                    'items' => [],
                    'rules' => ['required'],
                    'loading' => true
                ],
                'theory_course' => [
                    'type' => 'radiogroup',
                    'items' => [
                        0 => 'Nee, ik bereid me zelf thuis voor op het examen',
                        1 => 'Ja, ik doe mee! (€ 35,- inclusief soep en broodjes)'
                    ],
                    'label' => 'Wilt u meedoen aan de theoriecursus? (aanbevolen)',
                    'rules' => ['required'],
                ],
                'discount' => [
                    'type' => 'radiogroup',
                    'items' => [
                        0 => 'Ja, ik heb een kortingscode van OneDayOnly',
                        1 => 'Ja, ik heb een kortingscode van FNV'
                    ],
                    'label' => 'Beschikt u over een kortingscode?'
                ],
                'salutation' => [
                    'type' => 'radiogroup',
                    'items' => [
                        0 => 'Dhr.',
                        1 => 'Mevr.'
                    ],
                    'label' => 'Aanhef',
                    'rules' => ['required'],
                ],
                'name' => [
                    'type' => 'group',
                    'label' => 'Naam',
                    'schema' => [
                        'initials' => [
                            'type' => 'text',
                            'placeholder' => 'Voorletters',
                            'floating' => 'Voorletters',
                            'rules' => ['required'],
                            'columns' => 6
                        ],
                        'first_name' => [
                            'type' => 'text',
                            'placeholder' => 'Voornaam',
                            'floating' => 'Voornaam',
                            'rules' => ['required'],
                            'columns' => 6
                        ],
                        'middle_name' => [
                            'type' => 'text',
                            'placeholder' => 'Tussenvoegsel',
                            'floating' => 'Tussenvoegsel',
                            'columns' => 4
                        ],
                        'last_name' => [
                            'type' => 'text',
                            'placeholder' => 'Achternaam',
                            'floating' => 'Achternaam',
                            'rules' => ['required'],
                            'columns' => 4
                        ],
                        'maiden_name' => [
                            'type' => 'text',
                            'placeholder' => 'Meisjesnaam',
                            'floating' => 'Meisjesnaam',
                            'columns' => 4
                        ],
                    ]
                ],
                'birthdate' => [
                    'type' => 'text',
                    'label' => 'Geboortedatum',
                    'placeholder' => 'dd-mm-jjjj',
    //                'rules' => ['required', 'date_format:DD-MM-YYYY'],
                ],
                'address' => [
                    'type' => 'group',
                    'label' => 'Adres',
                    'schema' => [
                        'street' => [
                            'type' => 'text',
                            'placeholder' => 'Straat',
                            'floating' => 'Straat',
                            'rules' => ['required'],
                            'columns' => '8'
                        ],
                        'house_nr' => [
                            'type' => 'text',
                            'placeholder' => 'Huisnummer',
                            'floating' => 'Huisnummer',
                            'rules' => ['required'],
                            'columns' => '2'
                        ],
                        'house_nr_supplement' => [
                            'type' => 'text',
                            'placeholder' => 'Toevoegsel',
                            'floating' => 'Toevoegsel',
                            'columns' => '2'
                        ],
                        'postcode' => [
                            'type' => 'text',
                            'placeholder' => 'Postcode',
                            'floating' => 'Postcode',
                            'rules' => ['required'],
                            'columns' => '4'
                        ],
                        'city' => [
                            'type' => 'text',
                            'placeholder' => 'Woonplaats',
                            'floating' => 'Woonplaats',
                            'rules' => ['required'],
                            'columns' => '4'
                        ],
                        'country' => [
                            'type' => 'text',
                            'placeholder' => 'Land',
                            'floating' => 'Land',
                            'rules' => ['required'],
                            'columns' => '4'
                        ],
                    ]
                ],
                'email' => [
                    'type' => 'text',
                    'placeholder' => 'E-mailadres',
                    'label' => 'E-mailadres',
                    'rules' => ['required'],
                ],
                'phone' => [
                    'type' => 'group',
                    'schema' => [
                        'phone' => [
                            'type' => 'text',
                            'placeholder' => 'Telefoon (vast)',
                            'label' => 'Telefoon (vast)',
                            'rules' => ['required'],
                            'columns' => 6
                        ],
                        'mobile' => [
                            'type' => 'text',
                            'placeholder' => 'Telefoon (mobiel)',
                            'label' => 'Telefoon (mobiel)',
                            'rules' => ['required'],
                            'columns' => 6
                        ]
                    ]
                ],
                'remarks' => [
                    'type' => 'textarea',
                    'label' => 'Opmerkingen',
                ],
                'conditions' => [
                    'type' => 'checkbox',
                    'text' => 'Ik ga akkoord met de voorwaarden',
                    'rules' => ['required'],
                ],
            ];
        }
    
        public function buttons() {
            return [[
                'label' => 'Aanmelden'
            ]];
        }
    
        public function after() {
            return $this->success('Successfully subscribed');
        }
    }
    

    club_id is not in the fillable array of the registration object:

    <?php
    
    namespace App;
    
    use Illuminate\Database\Eloquent\Model;
    use Illuminate\Database\Eloquent\SoftDeletes;
    
    class Registration extends Model
    {
        use SoftDeletes;
    
        protected $fillable = [
            'seminar_id',
            'status',
            'salutation',
            'initials',
            'first_name',
            'middle_name',
            'last_name',
            'maiden_name',
            'street',
            'house_nr',
            'house_nr_supplement',
            'postcode',
            'city',
            'country',
            'email',
            'phone',
            'mobile',
            'remarks',
            'theory_course',
            'discount_code',
            'workflow'
        ];
    
        public function seminar()
        {
            return $this->belongsTo('App\Seminar');
        }
    }
    

    How to ommit the club_id from the insert?

    question 
    opened by basvandertogt 8
  • Client-Side Storage

    Client-Side Storage

    Prerequisites

    • [x ] You've read the documentation and couldn't find an answer.
    • [x ] Your question isn't already asked before.
    • [ x] You filled in the entire issue template.

    Versions

    PHP version: 8.1 Laravel version: 9 Laraform Vue package version and type: n/a Laraform Laravel package version:

    Description

    Hey guys,

    Do you have any solution for the client-side storage in case of refresh ?

    Best regards.

    Additional Information

    Any additional information, configuration or data that might be necessary to reproduce the issue.

    question stale 
    opened by p3f38 1
  • [BUG] Regexp mask for text inputs from backend

    [BUG] Regexp mask for text inputs from backend

    Prerequisites

    • [X] Able to reproduce the behaviour outside of your code, the problem is isolated to Laraform.
    • [X] Provided all the required dependencies to reproduce the bug (eg. form, component, model, migration - all with full class).
    • [X] Your issue isn't already filed.
    • [X] You filled in the entire issue template.

    Versions

    • PHP version: 8.1
    • Laravel version: 9.0
    • Laraform Vue package version and type: 1.2.16
    • Laraform Laravel package version: 1.2

    Description

    Mask not working from backend schema. When I send for example this schema to the form

    <?php
    
    $schema = [
        'example_phone' => [
            'type' => 'text',
            'mask' => ['(', '/[1-9]/', '/\d/', '/\d/', ')', ' ', '/\d/', '/\d/', '/\d/', '-', '/\d/', '/\d/', '/\d/', '/\d/'],
        ]
    ];
    

    In the frontend mask parts this will be treated as strings instead of regexp patterns.

    Steps to Reproduce

    Create any text element with any mask with regexp pattern from backend.

    Expected behavior:

    Treat patterns (sent as strings from backend) as RegExp objects.

    Actual behavior:

    Mask not working if set from backend and includes patterns.

    Additional Information

    I have patched this with adding new computed value in TextElement and using this new property in it's template.

    1. In components/elements/TextElement.vue at line 161 put this code.
      /**
       * Create js regexp objects of mask elements received from backend
       *
       * @returns {T[]}
       */
      maskNormalized() {
        return this.mask.map((item) => {
          let regexpPattern = /\/(.+)\/(.*)/
    
          if (typeof item === "string" && regexpPattern.test(item)) {
            // create regex object
            const flags = item.replace(regexpPattern, '$2')
            const pattern = item.replace(regexpPattern, '$1')
            item = (new RegExp(pattern, flags))
          }
          return item
        })
      }
    
    1. In themes/.../elements/TextElement.vue use maskNormalized instead of mask
    <MaskedInput
      v-if="masked"
      v-$model="model"
      :value="model"
      :type="type"
      :name="name"
      :id="id"
      :class="theme.classes.input"
      :placeholder="placeholder"
      :autocomplete="autocomplete ? 'on' : 'off'"
      :disabled="disabled"
      :readonly="readonly"
      :mask="maskNormalized"
      :guide="guide"
      :placeholderChar="placeholderChar"
      :keepCharPositions="keepCharPositions"
      :pipe="pipe"
      :showMask="showMask"
      @keyup="handleKeyup"
      @select="handleKeyup"
      ref="input"
    />
    
    bug stale 
    opened by anwsonwsymous 3
  • [BUG] PHP8.1/L9: HasMany::update fails if model has appended attributes

    [BUG] PHP8.1/L9: HasMany::update fails if model has appended attributes

    Prerequisites

    • [x] Able to reproduce the behaviour outside of your code, the problem is isolated to Laraform.
    • [x] Provided all the required dependencies to reproduce the bug (eg. form, component, model, migration - all with full class).
    • [x] Your issue isn't already filed.
    • [x] You filled in the entire issue template.

    Versions

    • PHP version: 8.1
    • Laravel version: 9
    • Laraform Vue package version and type: n/a
    • Laraform Laravel package version:

    Description

    Steps to Reproduce

    1. have a model with a custom attribute and is appended: protected $appends =['period'];
    2. edit the model via a related model

    Expected behavior:

    Changes are saved:

    Actual behavior:

    Column not found: 1054 Unknown column 'period' in 'field list'

    Additional Information

    I added a temporary workaround by replacing: $entity->{$this->attribute}()->find($item->{$this->primaryKey})->update($item->toArray()); with $entity->{$this->attribute}()->find($item->{$this->primaryKey})->update($item->getDirty());

    bug stale 
    opened by karlerss 3
Owner
Laraform
Full-stack form builder for Vue.js with Laravel support
Laraform
Viewi for Laravel: Build full-stack and completely reactive user interfaces with PHP.

[WIP] Laravel Viewi This is just a proof-of-concept. Don't use it in production! Viewi for Laravel: Build full-stack and completely reactive user inte

Protone Media 5 Jan 26, 2022
Laravel Form builder for version 5+!

Laravel 5 form builder Form builder for Laravel 5 inspired by Symfony's form builder. With help of Laravels FormBuilder class creates forms that can b

Kristijan Husak 1.7k Dec 31, 2022
A powerful form builder, for Laravel and other frameworks (stand-alone too)

Former A Laravelish way to create and format forms Former outputs form elements in HTML compatible with your favorite CSS framework (Bootstrap and Fou

null 1.3k Dec 22, 2022
Laravel Livewire (TALL-stack) form generator with realtime validation, file uploads, array fields, blade form input components and more.

TALL-stack form generator Laravel Livewire, Tailwind forms with auto-generated views. Support Contributions Features This is not an admin panel genera

TinaH 622 Jan 2, 2023
A demo of how to use filament/forms to build a user-facing Form Builder which stores fields in JSON.

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Dan Harrin 41 Dec 24, 2022
Provides a Eloquent query builder for Laravel or Lumen

This package provides an advanced filter for Laravel or Lumen model based on incoming requets.

M.Fouladgar 484 Jan 4, 2023
Laravel Mysql Spatial Builder Extension

magutti-spatial V2 Laravel Builder Mysql Spatial Extension Laravel Builder extensions to calculate distances between two Spatial points using Mysql na

Marco Asperti 4 Oct 2, 2022
A TWBS menu builder for Laravel

Laravel Menu Builder A menu builder for Laravel 4-5 using Bootstrap's markup. Документация на Русском Note that this package is shipped with no styles

Alexander Kalnoy 24 Nov 29, 2022
A simple to use query builder for the jQuery QueryBuilder plugin for use with Laravel.

QueryBuilderParser Status Label Status Value Build Insights Code Climate Test Coverage QueryBuilderParser is designed mainly to be used inside Laravel

Tim Groeneveld 149 Nov 11, 2022
A MongoDB based Eloquent model and Query builder for Laravel (Moloquent)

Laravel MongoDB This package adds functionalities to the Eloquent model and Query builder for MongoDB, using the original Laravel API. This library ex

Jens Segers 6.3k Jan 7, 2023
Laravel API architecture builder based on artisan commands.

??‍?? API-Formula Laravel API architecture builder based on artisan commands. This package provides a nice and fluent way to generate combined control

Krševan Lisica 1 Jan 16, 2022
A Laravel Admin Starter project with Page Builder, Roles, Impersonation, Analytics, Blog, News, Banners, FAQ, Testimonials and more

Laravel CMS Starter Project A Laravel CMS Starter project with AdminLTE theme and core features. Preview project here User: [email protected]

Ben-Piet O'Callaghan 306 Nov 28, 2022
Builder - A handful of tools for Rapid Laravel Development

Grafite Builder Grafite has archived this project and no longer supports or develops the code. We recommend using only as a source of ideas for your o

Grafite Inc 997 Dec 22, 2022
A DynamoDB based Eloquent model and Query builder for Laravel.

Laravel DynamoDB A DynamoDB based Eloquent model and Query builder for Laravel. You can find an example implementation in kitar/simplechat. Motivation

Satoshi Kita 146 Jan 2, 2023
Razorpay payment gateway integration in laravel with submit form and storing details in payment table.

Integrating razorpay payment gateway in laravel with submit form and storing payment details in payment table. How to settup the project in your local

Mohammed-Thamnees 3 Apr 15, 2021
Laravel Livewire form component with declarative Bootstrap 5 fields and buttons.

Laravel Livewire Forms Laravel Livewire form component with declarative Bootstrap 5 fields and buttons. Requirements Bootstrap 5 Installation composer

null 49 Oct 29, 2022
🧙‍♀️ Arcanist takes the pain out of building multi-step form wizards in Laravel.

Installation Arcanist requires PHP 8 and Laravel 8. composer require laravel-arcanist/arcanist Documentation You can find the full documentation here

Arcanist 378 Jan 3, 2023
A TALL-based Laravel Livewire component to replace the (multiple) select HTML input form with beautiful cards.

TALL multiselect cards A TALL-based Laravel Livewire component to replace the (multiple) select HTML input form with beautiful cards. Table of content

Frederic Habich 19 Dec 14, 2022
Generate form validators for Laravel: an extension of way/generators

Laravel Form Validator Contents Introduction Installation Usage Example Tests Introduction After using Jeffrey Way's Generator and his Validator packa

John Evans 6 Jan 14, 2022