Builtin form fields ¶

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 ¶

php

$form->text('title')->value('text...');

Set default value ¶

php

$form->text('title')->default('text...');

Set help message ¶

php

$form->text('title')->help('help...');

Set attributes of field element ¶

php

$form->text('title')->attribute(['data-title' => 'title...']);

$form->text('title')->attribute('data-title', 'title...');

Set placeholder ¶

php

$form->text('title')->placeholder('Please input...');

Set required ¶

php

$form->text('title')->required();

Setting pattern ¶

php

$form->text('title')->pattern('[A-z]{3}');

Setting readonly ¶

php

$form->text('title')->readonly();

Setting disable ¶

php

$form->text('title')->disable();

Setting autofocus ¶

php

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

php

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

text

php

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

textarea

php

$form->textarea($column[, $label])->rows(10);

Radio ¶

radio

php

$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

checkbox can store values in two ways, see[multiple select](#Multiple select)

The options() method is used to set options:

php

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

select

php

$form->select($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name']);

If have too many options, you can load option by ajax:

php

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

php

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:

json

{
    "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:

php

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

json

[
    {
        "id": 1,
        "text": "foo"
    },
    {
        "id": 2,
        "text": "bar"
    },
    ...
]

The code for the controller action is as follows:

php

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 ¶

mselect

php

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

php

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:

php

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

php

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

php

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:

json

{
    "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 ¶

QQ20200519-130525

The usage is as same as mutipleSelect.

php

$form->listbox($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name']);

// Set height
$form->listbox($column[, $label])->height(200);

Email input ¶

php

$form->email($column[, $label]);

Password input ¶

password

php

$form->password($column[, $label]);

URL input ¶

URL

php

$form->url($column[, $label]);

Ip input ¶

php

$form->ip($column[, $label]);

Phone number input ¶

mobile

php

$form->mobile($column[, $label])->options(['mask' => '999 9999 9999']);

Color selector ¶

color

php

$form->color($column[, $label])->default('#ccc');

Time input ¶

php

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

datetime

php

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

php

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

php

$form->timeRange($startTime, $endTime, 'Time Range');

Date range select ¶

$startDate、$endDateis the start and end date fields:

php

$form->dateRange($startDate, $endDate, 'Date Range');

Datetime range select ¶

$startDateTime、$endDateTime is the start and end datetime fields:

php

$form->datetimeRange($startDateTime, $endDateTime, 'DateTime Range');

Currency input ¶

php

$form->currency($column[, $label]);

// set the unit symbol
$form->currency($column[, $label])->symbol('￥');

Number input ¶

php

$form->number($column[, $label]);

// set max value
$form->number($column[, $label])->max(100);

// set min value
$form->number($column[, $label])->min(10);

Rate input ¶

php

$form->rate($column[, $label]);

Slider ¶

Can be used to select the type of digital fields, such as age:

php

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

Extension	URL
wangEditor	https://github.com/laravel-admin-extensions/wangEditor
wangEditor2	https://github.com/laravel-admin-extensions/wangEditor2
UEditor	https://github.com/laravel-admin-extensions/UEditor
Summernote	https://github.com/laravel-admin-extensions/summernote
Quill	https://github.com/laravel-admin-extensions/quill
CKEditor	https://github.com/laravel-admin-extensions/ckeditor
Simditor	https://github.com/laravel-admin-extensions/simditor

Hidden field ¶

php

$form->hidden($column);

Switch ¶

On and Off pairs of switches with the values 1 and0:

php

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

php

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

php

$form->display($column[, $label]);

Divider ¶

php

$form->divider();

// OR

$form->divider('Title');

Html ¶

insert html,the argument passed in could be objects which impletements Htmlable、Renderable, or has method __toString()

php

$form->html('html contents');

Tags ¶

Insert the comma (,) separated string tags

php

$form->tags('keywords');

Icon ¶

icon

Select the font-awesome icon.

php

$form->icon('icon');

Timezone ¶

php

$form->timezone('timezone');