This package has been deprecated. But worry not. You can use laraeast/laravel-bootstrap-forms
- Installation
- Opening A Form
- Text, Text Area, Date, Number & Password Fields
- Checkboxes and Radio Buttons
- Drop-Down Lists
- Generating A Submit Button
- Supported Methods
- Using Resource With Localed Fields
- Example Register Form
- Add Custom Style To The Component
- Using Multilingual Form Tabs
- Manage Locales
- Using Bootstrap 3
- Add Custom Component
Begin by installing this package through Composer. Edit your project's
composer.json
file to requireelnooronline/laravel-bootstrap-forms
.
composer require elnooronline/laravel-bootstrap-forms
You should publish the flags icons in public path to display in multilingual form tabs.
php artisan vendor:publish --tag=locales:flags
{{ BsForm::open(['url' => 'foo/bar']) }}
//
{{ BsForm::close() }}
By default, a
POST
method will be assumed; however, you are free to specify another method:
{{ BsForm::open(['url' => 'foo/bar', 'method' => 'post']) }}
Note: Since HTML forms only support
POST
andGET
,PUT
andDELETE
methods will be spoofed by automatically adding a_method
hidden field to your form.
You may also open forms with method as well:
{{ BsForm::get('foo/bar') }}
{{ BsForm::post('foo/bar') }}
{{ BsForm::put('foo/bar') }}
{{ BsForm::patch('foo/bar') }}
{{ BsForm::delete('foo/bar') }}
{{ BsForm::model($model, 'foo/bar') }}
{{ BsForm::putModel($model, 'foo/bar') }}
{{ BsForm::patchModel($model, 'foo/bar') }}
You may also open forms that point to named routes or controller actions:
{{ BsForm::open(['route' => 'route.name']) }}
{{ BsForm::open(['action' => 'Controller@method']) }}
You may pass in route parameters as well:
{{ BsForm::open(['route' => ['route.name', $user->id]]) }}
{{ BsForm::open(['action' => ['Controller@method', $user->id]]) }}
Generating A Text Input
{{ BsForm::text('username') }}
{{ BsForm::text('email', 'example@gmail.com') }}
{{ BsForm::text('email')->value('example@gmail.com') }}
Note: The date, number and textarea methods have the same signature as the text method.
{{ BsForm::password('password', ['class' => 'awesome']) }}
{{ BsForm::password('password')->attr('class', 'awesome') }}
{{ BsForm::email($name)->value($value)->label($label) }}
{{ BsForm::file($name)->label('Upload File') }}
{{ BsForm::checkbox('name', 'value')->checked(false) }}
{{ BsForm::checkbox('name')->value('value')->checked(false) }}
{{ BsForm::radio('name', 'value')->checked(false)->label('label') }}
{{ BsForm::radio('name')->value('value')->checked(false)->label('label') }}
{{ BsForm::select('size', ['L' => 'Large', 'S' => 'Small']) }}
{{ BsForm::select('size')->options(['L' => 'Large', 'S' => 'Small']) }}
{{ BsForm::select('size')->options(['L' => 'Large', 'S' => 'Small'])->value('S') }}
{{ BsForm::select('size')->options(['L' => 'Large', 'S' => 'Small'])->placeholder('Select Size') }}
{{ BsForm::select('animal',[
'Cats' => ['leopard' => 'Leopard'],
'Dogs' => ['spaniel' => 'Spaniel'],
]) }}
{{ BsForm::submit('Click Me!') }}
{{ BsForm::submit('Click Me!')->success() }}
{{ BsForm::submit('Click Me!')->primary() }}
{{ BsForm::submit('Click Me!')->info() }}
{{ BsForm::submit('Click Me!')->warning() }}
{{ BsForm::submit('Click Me!')->danger() }}
->label($label)
: To Generate label to the specified field.
{{ BsForm::text('username')->label('Username') }}
->name($name)
: To Generate label to the specified field.
{{ BsForm::text('username')->label('Username') }}
->placeholder($placeholder)
: To Set placeholder attribute to the specified field.
{{ BsForm::text('username')->placeholder('Please Enter Your Name') }}
->min($min)
: To Set min attribute to the specified number field.
{{ BsForm::number('age')->min(10) }}
->max($max)
: To Set max attribute to the specified number field.
{{ BsForm::number('age')->min(10)->max(30) }}
->step($step)
: To Set step attribute to the specified number field.
{{ BsForm::number('age')->min(10)->max(30)->step(1) }}
->multiple($bool = true)
: To Set multiple attribute to the specified select and file fields.
{{ BsForm::file('photos[]')->multiple() }}
->note($note)
: To Sethelp-block
to the specified field.
{{ BsForm::text('username')->note('Example: Ahmed Fathy') }}
->name($name)
: To Set the name of to the specified field.
{{ BsForm::text()->name('username')->note('Example: Ahmed Fathy') }}
->value($value)
: To Set the value of to the specified field as default will setold('name')
.
{{ BsForm::text()->name('username')->value('Ahmed Fathy') }}
->inlineValidation($bool = true)
: To display validation errors in the specified field.
{{ BsForm::text('username')->style('vertical')->inlineValidation(false) }}
->style($style = 'default')
: To Set style to the specified field. supported['default', 'vertical']
.
{{ BsForm::text('username')->style('vertical') }}
{{ BsForm::text('email')->style('default') }}
->close()
: To close the form tag.
{{ BsForm::close() }}
You may add localed labels, notes and placeholders using resource option as well:
@php(BsForm::resource('users'))
You must add
users.php
file to theresources/lang/en/
path and set the default attributes and notes, placeholders as well:
<?php
return [
'attributes' => [
'username' => 'User Name',
'email' => 'E-mail Address',
'phone' => 'Phone Number',
],
'notes' => [
'username' => 'Example: Ahmed Fathy',
'email' => 'Example: aliraqi-dev@gmail.com',
'phone' => 'Example: +02xxxxxxxxxxx',
],
'placeholders' => [
'username' => 'Please enter your name.',
'email' => 'Please enter your e-mail address.',
'phone' => 'Please enter your phone number.',
],
...
];
You can using custom error bag to display validation errors without any conflict.
// Default error bag
BsForm::errorBag('default');
// Other error bag
BsForm::errorBag('create');
@php(BsForm::resource('users'))
{{ BsForm::post(route('register')) }}
{{ BsForm::text()->name('name') }}
{{ BsForm::email('email') }}
{{ BsForm::text('phone') }}
{{ BsForm::submit()->danger() }}
{{ BsForm::close() }}
{{ BsForm::post(route('categories.store')) }}
@bsMultilangualFormTabs
{{ BsForm::text('name') }}
@endBsMultilangualFormTabs
{{ BsForm::submit()->danger() }}
{{ BsForm::close() }}
Note : the input name inside
@bsMultilangualFormTabs
and@endBsMultilangualFormTabs
suffix with:{lang}
.Ex. if your supported language is
ar
&en
the input will named withname:ar
&name:en
.You should use Astrotomic/laravel-translatable and configure it's rule_factory with key format
\Astrotomic\Translatable\Validation\RuleFactory::FORMAT_KEY
to fill the multilingual data like the following example.
Category::create([
'name:ar' => 'سيارات',
'name:en' => 'Cars',
]);
// with laravel-bootstrap-forms
Category::create($request->all());
You can add your supported locales in
locales.php
config file. you will get it using the following command:
php artisan vendor:publish --tag=locales:config
<?php
return [
/*
|--------------------------------------------------------------------------
| Application Locales
|--------------------------------------------------------------------------
|
| Contains an array with the applications available locales.
|
*/
'en' => [
'code' => 'en',
'name' => 'English',
'dir' => 'ltr',
'flag' => '/images/flags/us.png'
],
'ar' => [
'code' => 'ar',
'name' => 'العربية',
'dir' => 'rtl',
'flag' => '/images/flags/sa.png'
],
];
If you want to use bootstrap 3 you should publish the config file using the following commad and set the bootstrap version globally.
php artisan vendor:publish --tag=laravel-bootstrap-forms.config
<?php
return [
/**
* The path of form components views.
*
* - 'BsForm::bootstrap4' - Bootstrap 4
* - 'BsForm::bootstrap3' - Bootstrap 3
*/
'views' => 'BsForm::bootstrap3',
];
After change bootstrap version you should clear the cached view files using the
view:clear
artisan command.
php artisan view:clear
run the
vendor:publish
artusan command to override components views as well.
php artisan vendor:publish --provider="Elnooronline\LaravelBootstrapForms\Providers\BootstrapFormsServiceProvider" --tag BsForm
will override components in
resources/views/vendor/BsForm
path.
- views
- vendor
- BsForm
- bootstrap4
- text
- default.blade.php
- vertical.blade.php
- custom.blade.php
- email
- default.blade.php
- vertical.blade.php
- custom.blade.php
you can copy
default.blade.php
file ascustom.blade.php
and use custom style as well :
{{ BsForm::text('name')->style('custom') }}
you can also set the style globally with
BsForm::style()
method before the form open as well :
@php(BsForm::style('custom'))
or
@php(BsForm::resource('users')->style('custom'))
To reset the custom style to the default you should call
clearStyle()
method as well:
@php(BsForm::clearStyle())
For Example :
@php(BsForm::resource('users')->style('web'))
{{ BsForm::model($user, route('users.update', $user)) }}
{{-- All fields here uses web style --}}
{{ BsForm::text('name') }}
{{ BsForm::text('email') }}
@php(BsForm::clearStyle())
{{-- All fields after clearing uses default style --}}
{{ BsForm::text('phone') }}
{{ BsForm::textarea('address') }}
{{ BsForm::submit()->style('inline') }}
{{ BsForm::close() }}
You may add new component class extends
BaseComponent
and regoster it in yourboot()
method inAppServiceProvider
class as well:
<?php
namespace App\Components;
use Elnooronline\LaravelBootstrapForms\Components\BaseComponent;
class ImageComponent extends BaseComponent
{
/**
* The component view path.
*
* @var string
*/
protected $viewPath = 'components.image';
/**
* The image file path.
*
* @var string
*/
protected $file;
/**
* Initialized the input arguments.
*
* @param null $name
* @param null $file
* @return $this
*/
public function init($name = null, $file = null)
{
$this->name = $name;
$this->value = $file ?: 'http://via.placeholder.com/100x100';
//$this->hasDefaultLocaledLabel($name);
//$this->hasDefaultLocaledNote($name);
//$this->hasDefaultLocaledPlaceholder($name);
return $this;
}
/**
* Set the file path.
*
* @param $file
* @return $this
*/
public function file($file)
{
$this->file = $file;
return $this;
}
/**
* The variables with registerd in view component.
*
* @return array
*/
protected function viewComposer()
{
return [
'file' => $this->file,
];
}
}
Then register the component class in
boot()
method in yourAppServiceProvider
class as well :
<?php
namespace App\Providers;
use App\Components\ImageComponent;
use Illuminate\Support\ServiceProvider;
use Elnooronline\LaravelBootstrapForms\Facades\BsForm;
class AppServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
//
BsForm::registerComponent('image', ImageComponent::class);
...
}
...
Then publish the BsForm views and create the new component file in
views/vendor/BsForm/bootstrap4/components/image/default.blade.php
path.
Eexample content of
views/vendor/BsForm/bootstrap4/components/image/default.blade.php
file :
<div class="form-group{{ $errors->has($name) ? ' has-error' : '' }}">
@if($label)
{{ Form::label($name, $label, ['class' => 'content-label']) }}
@endif
{{ Form::file($name, array_merge(['class' => 'form-control'], $attributes)) }}
@if($inlineValidation)
@if($errors->has($name))
<strong class="help-block">{{ $errors->first($name) }}</strong>
@else
<strong class="help-block">{{ $note }}</strong>
@endif
@else
<strong class="help-block">{{ $note }}</strong>
@endif
@if($file)
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="{{ $file }}">
</a>
</div>
</div>
@endif
</div>
{{ BsForm::image('photo', $url) }}