An awesome package for easy dynamic forms with Laravel Livewire and Bootstrap v4.
Some special input types may require external javascript dependencies (besides Bootstrap).
The following inputs are currently supported:
- Checkbox
- Code (requires CodeMirror.js)
- Color
- Date
- Datetime (composed of a date and a time input)
- Decimal/Money (own implementation with currency and custom unit support)
- File
- Hidden
- Number
- Password
- Radio (Bootstrap radio button group)
- RichTextarea (requires Quill.js)
- Select (requires bootstrap-select)
- Text
- Textarea
- Time
- It's also possible to create your own custom input types...
You can install the package via composer:
composer require nodus-it/livewire-forms
Include the JavaScript after the @livewireScripts directive on every page that will be using Livewire.
...
<body>
...
@livewireScripts
<script src="{{ asset( 'livewire-forms/livewire-forms.js' ) }}"></script>
</body>
</html>You can publish the config file with:
php artisan vendor:publish --provider="Nodus\Packages\LivewireForms\LivewireFormsServiceProvider" --tag="livewire-forms:config"
You can publish the blade views with:
php artisan vendor:publish --provider="Nodus\Packages\LivewireForms\LivewireFormsServiceProvider" --tag="livewire-forms:views"
class UserForm extends FormView
{
public function inputs()
{
$this->addText('name')
->setValidations('required|unique:users,name')
->setSize(4);
$this->addSelect('country')
->setOptions(['DE' => ['label' => 'DE']])
->setValidations('required')
->setDefaultValue('DE');
$this->addInput(CustomFileUploadInput::class, 'picture')
$this->addSection('tenants.views.contact');
$this->addText('email')
->setValidations('required|email');
$this->addText('phone')
->setValidations('required');
}
public function submitCreate(array $values)
{
User::query()->create($values);
return redirect()->back();
}
public function submitUpdate(array $values, User $user)
{
$user->update($values);
return redirect()->back();
}
}Add your created form like any other Livewire component to your blade templates:
<livewire:user-form />In case you want to prepopulate the input fields with an existing dataset, pass the desired model or array as attribute:
<livewire:user-form :model-or-array="$user" />If you need to pass some custom data inside your forms, you can do so by passing additional data as array via the "additional-view-parameter" attribute:
<livewire:user-form :additional-view-parameter="['customKey' => 'customData']" />All the given additional parameter can then be acccess directly in your form like so:
public function submitCreate(array $values)
{
$this->customKey // resolves via __get() Magic to "customData"
}- File input
- chunked upload handling (https://fly.io/laravel-bytes/multi-file-upload-livewire/)
- All Inputs
- improve multiple support
- check if we should support more properties
- custom property system
- New inputs
- High-level input types e.g. Phone or Email (incl. automatic validation and input mode defaults)
- Maybe add also support for native select inputs
- Extensibility
- override default classes (class overload)
- external extensions (e.g. remote select)
- remote loading is not supported by bootstrap select
- maybe move to alternative select plugin package (e.g. https://github.com/orchidjs/tom-select)
- Post Handling
- Validation: add support for array validation rules
- Improve validation exception handling if such is thrown inside the submit methods
- Find another solution for the integration of external plugins like bootstrap-select than using "wire:ignore" due to several drawbacks that come with this, such as no possibility for dynamic select option updates.
composer test
The MIT License (MIT). Please see License File for more information.