Builtin form fields
- Public methods
- Text input
- Textarea
- Radio
- Checkbox
- Select
- Multiple select
- Listbox
- Email input
- Password input
- URL input
- Ip input
- Phone number input
- Color selector
- Time input
- Date input
- Datetime input
- Time range select
- Date range select
- Datetime range select
- Currency input
- Number input
- Rate input
- Slider
- Rich text editor
- Hidden field
- Switch
- Map
- Display field
- Divider
- Html
- Tags
- Icon
- Timezone
There are a lots of form components built into the model-form to help you quickly build forms.
Public methods
Set the value to save
$form->text('title')->value('text...');Set default value
$form->text('title')->default('text...');Set help message
$form->text('title')->help('help...');Set attributes of field element
$form->text('title')->attribute(['data-title' => 'title...']);
$form->text('title')->attribute('data-title', 'title...');Set placeholder
$form->text('title')->placeholder('Please input...');Set required
$form->text('title')->required();Setting pattern
$form->text('title')->pattern('[A-z]{3}');Setting readonly
$form->text('title')->readonly();Setting disable
$form->text('title')->disable();Setting autofocus
$form->text('title')->autofocus();Model-form-tab
If the form contains too many fields, will lead to form page is too long, in which case you can use the tab to separate the form:
$form->tab('Basic info', function ($form) {
$form->text('username');
$form->email('email');
})->tab('Profile', function ($form) {
$form->image('avatar');
$form->text('address');
$form->mobile('phone');
})->tab('Jobs', function ($form) {
$form->hasMany('jobs', function () {
$form->text('company');
$form->date('start_date');
$form->date('end_date');
});
})
Text input
$form->text($column, [$label]);
// Add a submission validation rule
$form->text($column, [$label])->rules('required|min:10');
// Set FontAwesome icon
$form->text($column, [$label])->icon('fa-pencil');
// Set datalist
$form->text($column, [$label])->datalist(['key' => 'value']);
// Set inputmask, see https://github.com/RobinHerbots/Inputmask
$form->text('code')->inputmask(['mask' => '99-9999999']);Textarea
$form->textarea($column[, $label])->rows(10);Radio
$form->radio($column[, $label])->options(['m' => 'Female', 'f'=> 'Male'])->default('m');
$form->radio($column[, $label])->options(['m' => 'Female', 'f'=> 'Male'])->default('m')->stacked();Checkbox
checkbox can store values in two ways, see[multiple select](#Multiple select)
The options() method is used to set options:
$form->checkbox($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name']);
$form->checkbox($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name'])->stacked();
// Setting options through closures
$form->checkbox($column[, $label])->options(function () {
return [1 => 'foo', 2 => 'bar', 'val' => 'Option name'];
});
// If there are too many options, you can add a full checkbox to it.
$form->checkbox($column[, $label])->options([])->canCheckAll();Select
$form->select($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name']);If have too many options, you can load option by ajax:
$form->select('user_id')->options(function ($id) {
$user = User::find($id);
if ($user) {
return [$user->id => $user->name];
}
})->ajax('/admin/api/users');The controller method for api /admin/api/users is:
public function users(Request $request)
{
$q = $request->get('q');
return User::where('name', 'like', "%$q%")->paginate(null, ['id', 'name as text']);
}
The json returned from api /admin/demo/options:
{
"total": 4,
"per_page": 15,
"current_page": 1,
"last_page": 1,
"next_page_url": null,
"prev_page_url": null,
"from": 1,
"to": 3,
"data": [
{
"id": 9,
"text": "xxx"
},
{
"id": 21,
"text": "xxx"
},
{
"id": 42,
"text": "xxx"
},
{
"id": 48,
"text": "xxx"
}
]
}Cascading select
select component supports one-way linkage of parent-child relationship:
$form->select('province')->options(...)->load('city', '/api/city');
$form->select('city');
Where load('city', '/api/city'); means that, after the current select option is changed, the current option will call the api /api/city via the argumentq api returns the data to fill the options for the city selection box, where api /api/city returns the data format that must match:
[
{
"id": 1,
"text": "foo"
},
{
"id": 2,
"text": "bar"
},
...
]The code for the controller action is as follows:
public function city(Request $request)
{
$provinceId = $request->get('q');
return ChinaArea::city()->where('parent_id', $provinceId)->get(['id', DB::raw('name as text')]);
}Multiple select
$form->multipleSelect($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name']);You can store value of multiple select in two ways, one is many-to-many relation.
class Post extends Models
{
public function tags()
{
return $this->belongsToMany(Tag::class);
}
}
$form->multipleSelect('tags')->options(Tag::all()->pluck('name', 'id'));
The second is to store the option array into a single field. If the field is a string type, it is necessary to define accessor and Mutator for the field.
For example, the field tags is stored as a string and separated by a comma ,, then its accessors and modifiers are defined as follows:
class Post extends Model
public function getTagsAttribute($value)
{
return explode(',', $value);
}
public function setTagsAttribute($value)
{
$this->attributes['tags'] = implode(',', $value);
}
}If have too many options, you can load option by ajax
$form->select('user_id')->options(function ($id) {
$user = User::find($id);
if ($user) {
return [$user->id => $user->name];
}
})->ajax('/admin/api/users');The controller method for api /admin/api/users is:
public function users(Request $request)
{
$q = $request->get('q');
return User::where('name', 'like', "%$q%")->paginate(null, ['id', 'name as text']);
}
The json returned from api /admin/demo/options:
{
"total": 4,
"per_page": 15,
"current_page": 1,
"last_page": 1,
"next_page_url": null,
"prev_page_url": null,
"from": 1,
"to": 3,
"data": [
{
"id": 9,
"text": "xxx"
},
{
"id": 21,
"text": "xxx"
},
{
"id": 42,
"text": "xxx"
},
{
"id": 48,
"text": "xxx"
}
]
}Listbox
The usage is as same as mutipleSelect.
$form->listbox($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name']);
// Set height
$form->listbox($column[, $label])->height(200);Email input
$form->email($column[, $label]);Password input
$form->password($column[, $label]);URL input
$form->url($column[, $label]);Ip input
$form->ip($column[, $label]);Phone number input
$form->mobile($column[, $label])->options(['mask' => '999 9999 9999']);Color selector
$form->color($column[, $label])->default('#ccc');Time input
$form->time($column[, $label]);
// Set the time format, more formats reference http://momentjs.com/docs/#/displaying/format/
$form->time($column[, $label])->format('HH:mm:ss');Date input
$form->date($column[, $label]);
// Date format setting,more format please see http://momentjs.com/docs/#/displaying/format/
$form->date($column[, $label])->format('YYYY-MM-DD');Datetime input
$form->datetime($column[, $label]);
// Set the date format, more format reference http://momentjs.com/docs/#/displaying/format/
$form->datetime($column[, $label])->format('YYYY-MM-DD HH:mm:ss');Time range select
$startTime、$endTimeis the start and end time fields:
$form->timeRange($startTime, $endTime, 'Time Range');Date range select
$startDate、$endDateis the start and end date fields:
$form->dateRange($startDate, $endDate, 'Date Range');Datetime range select
$startDateTime、$endDateTime is the start and end datetime fields:
$form->datetimeRange($startDateTime, $endDateTime, 'DateTime Range');Currency input
$form->currency($column[, $label]);
// set the unit symbol
$form->currency($column[, $label])->symbol('￥');
Number input
$form->number($column[, $label]);
// set max value
$form->number($column[, $label])->max(100);
// set min value
$form->number($column[, $label])->min(10);Rate input
$form->rate($column[, $label]);Slider
Can be used to select the type of digital fields, such as age:
$form->slider($column[, $label])->options(['max' => 100, 'min' => 1, 'step' => 1, 'postfix' => 'years old']);More options please ref to https://github.com/IonDen/ion.rangeSlider#settings
Rich text editor
The rich text editing component is removed after v1.7.0 version, please choose to use the following rich text editor extension:
Hidden field
$form->hidden($column);Switch
On and Off pairs of switches with the values 1 and0:
$states = [
'on' => ['value' => 1, 'text' => 'enable', 'color' => 'success'],
'off' => ['value' => 0, 'text' => 'disable', 'color' => 'danger'],
];
$form->switch($column[, $label])->states($states);Map
The map component has been deprecated and will be removed in a later release. Please use Latitude and longitude selector plugin extension instead.
The map field refers to the network resource, and if there is a problem with the network refer to form Component Management to remove the component.
Used to select the latitude and longitude, $ latitude,$ longitude for the latitude and longitude field, using Tencent map when locale set of laravel iszh_CN, otherwise use Google Maps:
$form->map($latitude, $longitude, $label);
// Use Tencent map
$form->map($latitude, $longitude, $label)->useTencentMap();
// Use google map
$form->map($latitude, $longitude, $label)->useGoogleMap();Display field
Only display the fields and without any action:
$form->display($column[, $label]);Divider
$form->divider();
// OR
$form->divider('Title');Html
insert html,the argument passed in could be objects which impletements Htmlable、Renderable, or has method __toString()
$form->html('html contents');Tags
Insert the comma (,) separated string tags
$form->tags('keywords');Icon
Select the font-awesome icon.
$form->icon('icon');Timezone
$form->timezone('timezone');