Reactive Form Builder for Vue.js with Laravel Support

Laraform

Last update: Dec 31, 2022

Related tags

Laravel vuejs laravel vue laravel-framework form form-builder form-generator laraform

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
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

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

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

bug stale

opened by mohammed-alfarra 12

[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]

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

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?
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
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.

Actual behavior:

All the steps are enabled and marked as completed.

Additional Information

bug stale
opened by TonnyORG 9
[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
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

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
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
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.

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 }) }

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
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

have a model with a custom attribute and is appended: protected $appends =['period'];

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

GitHub https://laraform.io

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

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

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

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

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

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.

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

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

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

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

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

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]

306 Nov 28, 2022

Reactive Form Builder for Vue.js with Laravel Support

Related tags

Overview

Laraform Community Edition (Vue.js)

Features

Examples

Browser Support

Installation

Usage

Feature Comparison

Documentation

Issue Tracking

Support & Contribution

License

Comments

Prerequisites

Versions

Description

Additional Information

Prerequisites

Versions

Description

Prerequisites

Versions

Description

Steps to Reproduce

Prerequisites

Versions

Description

Additional Information

Prerequisites

Versions

Description

Additional Information

Prerequisites

Versions

Description

Steps to Reproduce

Additional Information

Prerequisites

Versions

Description

Steps to Reproduce

Additional Information

Prerequisites

Versions

Description

Additional Information

Prerequisites

Versions

Description

Prerequisites

Versions

Description

Additional Information

Prerequisites

Versions

Description

Steps to Reproduce

Additional Information

Prerequisites

Versions

Description

Steps to Reproduce

Additional Information

Owner

Laraform

Viewi for Laravel: Build full-stack and completely reactive user interfaces with PHP.

Laravel Form builder for version 5+!

A powerful form builder, for Laravel and other frameworks (stand-alone too)

Laravel Livewire (TALL-stack) form generator with realtime validation, file uploads, array fields, blade form input components and more.

A demo of how to use filament/forms to build a user-facing Form Builder which stores fields in JSON.

Provides a Eloquent query builder for Laravel or Lumen

Laravel Mysql Spatial Builder Extension

A TWBS menu builder for Laravel

A simple to use query builder for the jQuery QueryBuilder plugin for use with Laravel.

A MongoDB based Eloquent model and Query builder for Laravel (Moloquent)

Laravel API architecture builder based on artisan commands.

A Laravel Admin Starter project with Page Builder, Roles, Impersonation, Analytics, Blog, News, Banners, FAQ, Testimonials and more

Builder - A handful of tools for Rapid Laravel Development