sahibalejandro / laravel-form-helpers
Handle form model binding, old input binding and validation error messages in a clean and easy way.
Installs: 1 998
Dependents: 0
Suggesters: 0
Security: 0
Stars: 7
Watchers: 3
Forks: 3
Open Issues: 0
Requires
- php: >=5.5.9
Requires (Dev)
- laravel/laravel: ~5.2
- phpunit/phpunit: ~4.0
README
A set of blade directives that automatically fill forms using the old input or an Eloquent model, it also helps you to display validation error messages in a clean and easy way.
Example
See how easy is to do cool stuff with these directives, for example if you are using Bootstrap for your markup, you can do something like this:
<form action="/users" method="POST"> @form($model) <div class="form-group @error('name', 'has-error')"> <input type="text" @input('name')> @error('name') </div> </form>
And in the case of the user is redirected back with errors, the result will be:
<form action="/users" method="POST"> <div class="form-group has-error"> <input type="text" name="name" value="Bad Name"> <div class="help-block">Error message</div> </div> </form>
¡It's awesame!
Installation
Install with composer, just run the command:
composer require sahibalejandro/laravel-form-helpers
Then add the service provider to your config/app.php
file:
'providers' => [ Sahib\Form\FormServiceProvider::class, ];
That's all.
Configuration
Optionally you can publish the configuration file with this command:
php artisan vendor:publish --provider=Sahib\Form\FormServiceProvider
After that you can edit the config/form-helpers.php
file.
Usage
@form
@form([ Model $model = null ])
Use the optional @form
directive to bind a model to your form.
Ignore this directive if you just want the old input binding
and no the model binding.
<form action="/users/123" method="POST"> @form($user) </form>
@input
@input(string $attribute [, string $default = null ])
Use the @input
directive to assign the value to an input field:
<input type="text" @input('name')> <input type="text" @input('something', 'default')>
This will result in the following markup:
<input type="text" name="name" value=""> <input type="text" name="something" value="default">
@text
@text(string $attribute [, string $default = null ])
Use the @text
directive to assign the value to a textarea field:
<textarea name="description">@text('description')</textareas> <textarea name="bio">@text('bio', 'Default')</textareas>
This will result in the following markup:
<textarea name="description"></textarea> <textarea name="bio">Default</textarea>
@checkbox
@checkbox(string $attribute [, mixed $value = 1 [, boolean $checked = false ]])
Use the @checkbox
to set the value and the state of a checkbox:
<input type="checkbox" @checkbox('remember_me')> <!-- With a custom value --> <input type="checkbox" @checkbox('newsletter', 'yes')> <!-- Activate the checkbox by default --> <input type="checkbox" @checkbox('send_sms', 1, true)>
This will result in the following markup:
<input type="checkbox" name="remember_me" value="1"> <!-- With a custom value --> <input type="checkbox" name="newsletter" value="yes"> <!-- Activate the checkbox by default --> <input type="checkbox" name="send_sms" value="1" checked>
@radio
@radio(string $attribute [, mixed $value = 1 [, boolean $checked = false ]])
The @radio
directive is used in the same way as @checkbox
directive, in fact
is just an alias:
<input type="radio" @radio('color', 'red')> <input type="radio" @radio('color', 'green', true)> <input type="radio" @radio('color', 'blue')>
This will result in the following markup:
<input type="radio" name="color" value="red"> <input type="radio" name="color" value="green" checked> <input type="radio" name="color" value="blue">
@options
@options(array $options, string $attribute [, mixed $default = null [, string $placeholder = null ]])
Use the @options
directive to display a list of options for a select field.
Note: It also works with select multiple fields when the model's attribute, old input or $default
value is an array.
Let's say we pass an array named $cardTypes
to the view and use it with the @options
directive:
$cardTypes = [ 'VISA' => 'Visa', 'MC' => 'Master Card', 'AME' => 'American Express', ];
<select name="card_type"> @options($cardTypes, 'card_type') </select>
This will result in the following markup:
<select name="card_type"> <option value="VISA">Visa</option> <option value="MC">Master Card</option> <option value="AME">American Express</option> </select>
Of course you can set a default selected option:
<select name="card_type"> @options($cardTypes, 'card_type', 'MC') </select>
And the result will be:
<select name="card_type"> <option value="VISA">Visa</option> <option value="MC" selected>Master Card</option> <option value="AME">American Express</option> </select>
Also you can define a placeholder option:
<select name="card_type"> @options($cardTypes, 'card_type', null, 'Select a card type') </select>
The result will be:
<select name="card_type"> <option value="" selected disabled>Select a card type</option> <option value="VISA">Visa</option> <option value="MC">Master Card</option> <option value="AME">American Express</option> </select>
@error
@error(string $attribute [, string $template = null ])
Use the @error
directive to display a validation error message, this directive will check for you if the error
exists or not.
<input type="text" @input('name')> @error('name')
Then when the user is redirected back with errors, the result will be:
<input type="text" name="name" value="Name That Fail Validation"> <div class="help-block">The name field fails validation.</div>
Note that the @error
directive is Bootstrap friendly by default, but you can define a custom template inline or in the config file:
@error('name', '<span class="error">:message</span>')
And the result will be:
<span class="error">Error message</span>
See how easy is to do cool stuff with @error
directive, for example
if you are using Bootstrap for your markup, you can do something like this:
<div class="form-group @error('name', 'has-error')"> <input type="text" @input('name')> @error('name') </div>
And in the case the user is redirected back with errors, the result will be:
<div class="form-group has-error"> <input type="text" name="name" value="Bad Name"> <div class="help-block">Error message</div> </div>