Fields

Text

文本输入框

<input type="text" name="xx" id="xx" />
$form = Lego::form(new User);
$form->addText('name', 'Your Name')

    // Validation
    ->required()
    ->unique()
    ->rule('numberic') // Laravel Validation rules
    // - 自定义的验证逻辑
    ->validator(function ($value) {
        if (is_illegal($value)) {
            return 'this name is illegal';
        }
    })

    // 展示模式
    ->readonly()
    ->editable() // $ifYouAreAwesome
    ->extra('select a nick name')

    // 字段值
    ->default('Tom')

    // html 属性
    ->attr('class', 'text-danger')
    ->attr(['class' => 'text-danger', 'data-mask' => '999'])
    // - 修改 Field 上一层的属性,Boostrap 中的 .from-group div
    ->container('class', 'text-danger')
    ->container(['class' => 'hide'])

    // i18n
    ->locale('zh-CN') // default App::getLocale()
;

Number

数字输入框

$form->addNumber('price')
    ->step(0.01)
    ->max(10000)
    ->min(0)

Select

$form->addSelect('status')
    ->values('active', 'deactive')
    // or
    ->options([
        0 => 'deactive',
        1 => 'active',
    ])

Select2

Select2 - The jQuery replacement for select boxes

Select 选项很多时,推荐使用 Select2 ,用户体验会好很多

$form->addSelect2('reason')
    ->values(...)

AutoComplete

自动补全输入框

$form = Lego::form(new Book);
$form->addAutoComplete('author.name', 'Author')
    // 自定义补全结果
    ->match(function ($keyword) {
        return Author::whereMatch($keyword)
            ->limit(10)
            ->pluck('name', 'id')
            ->all();
    })
;

Datetime

日期时间输入框

$form = Lego::form(new Book);
$form->addDatetime('checked_at', 'Checked At');

Date

日期输入框

$form = Lego::form(new Human);
$form->addDate('birthday', 'Birthday');

日期输入控件在移动端会自动触发原生日期控件

注意:由于 datetime-local 在不同浏览器的表现行为不统一,所以 Datetime 不会触发原生日期控件

有两种方式禁用此特性:

Time

$form = Lego::form(new Schedule);
$form->addTime('daily_at', 'Select Time');

Textarea

长文本输入框

$form->addTextarea('description', 'Description');

Readonly

只读文本

$form->addReadonly('Description', 'this is description of ...');

JSON

修改 json 字段中的指定 key ,只能应对简单场景,此 Field 的主要目标是为了方便实现更多其他定制性的 Field

$suite = new Suite;
$suite->images = '{"wall": ["...", "..."]}'


$form->addJSON('wall');

// 也支持嵌套的 key
$form->addJSON('bedroom:wall:bottom')

上面代码最后的嵌套 key 之所以使用 : 分隔是为了避免与 Laravel 的 Relation 写法冲突

Radios

单选框

$form->addRadios('confirm')
    ->values('yes', 'no')

Checkboxes

多选框

由于 checkboxes 会产生多个值,在存储到数据库时,默认使用 | 间隔拼接成字符串,如果需要修改间隔符号, 可以调用 ->separator($glue) 传入。

如果需要全局修改,可在配置文件 lego.phpfield.provider 中添加下面配置

\Lego\Field\Provider\Checkboxes::class => [
    'separator' => '|'
]
$form->addCheckboxes('status')
    ->values([1, 2, 3])
    // or
    ->options([
        0 => 'deactive',
        1 => 'active',
    ])

CascadeSelect

级联输入框

$city = $form->addSelect('city')
    ->values(City::pluck('name', 'id'));

$form->addCascadeSelect('street')
    ->depend($city, function ($cityId) {
        return City::find($cityId)
            ->streets
            ->pluck('name', 'id');
    });

RichText

继承自 Textarea ,前端使用 tinymce

$form->addRichText('introduction')

自定义 Field

namespace LegoFields;

class Email extends Lego\Field\Provider\Text
{
    protected fucntion initialize()
    {
        parent::initialize();
        $this->rule('email');
    }
}

Email field in http://getbootstrap.com/css/#forms-controls-static

注册到配置文件:lego.php

    /**
     * 自定义的 Field
     */
    'user-defined-fields' => [
        \LegoFields\Email::class,
    ],

Note

为了方便 IDE 进行自动补全,Lego 内置的 Field 在 release 时会将 addXXX 系列函数的辅助注释写到 HasFields trait 中,Lego 外部定义的 Field 可以通过调用下面命令生成 _ide_helper_lego.php 文件到项目根目录

php artisan lego:generate-ide-helper

不需要存储到 Model 的 Field

$form->addText('abc', 'Abc')->doesntStore();

Model::saving(function (Model $model) {
    dump($model->abc); // is null
})