README

请在此处查看我的最新包： https://github.com/bastinald/laravel-livewire-forms

Laravel Livewire Forms

一个具有实时验证、文件上传、数组字段等功能的动态、响应式的 Laravel Livewire 表单组件。

安装

通过 composer 安装此包

composer require kdion4891/laravel-livewire-forms

此包旨在与 Laravel 前端脚手架良好配合。

如果您现在正在做脚手架，您需要将 @stack('scripts')、@livewireScripts 和 @livewireStyles blade 指令添加到您的 resources/views/layouts/app.blade.php 文件中

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@livewireStyles

...

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
@stack('scripts')

此包还使用 Font Awesome 作为图标。如果您还没有安装，只需

npm install @fortawesome/fontawesome-free

然后将以下行添加到 resources/sass/app.scss

@import '~@fortawesome/fontawesome-free/css/all.min.css';

现在只需编译资源即可

npm install && npm run dev

制作表单组件

使用 make 命令

php artisan make:form UserCreateForm --model=User

这将在 app/Http/Livewire 文件夹中创建您的新表单组件。

创建组件后，您可能想要编辑 fields、success、saveAndStayResponse 和 saveAndGoBackResponse 方法

class UserCreateForm extends FormComponent
{
    public function fields()
    {
        return [
            Field::make('Name')->input()->rules('required'),
        ];
    }

    public function success()
    {
        User::create($this->form_data);
    }

    public function saveAndStayResponse()
    {
        return redirect()->route('users.create');
    }

    public function saveAndGoBackResponse()
    {
        return redirect()->route('users.index');
    }
}

您不需要在表单组件中使用 render() 方法，也不必担心组件视图，因为该包会自动处理。

小贴士：您可以将 FillsColumns 特性添加到您的模型中，以便通过数据库列名自动设置 $fillable。

使用表单组件

您可以在视图中像使用其他 Livewire 组件一样使用表单组件

@livewire('user-create-form')

现在您只需更新表单组件类即可！

表单组件属性

`$model`

可选的附加到表单组件的 Eloquent 模型实例。此实例通过 @livewire blade 指令传入。

示例

@livewire('user-edit-form', ['model' => $user])

在组件 success 方法中使用模型的示例

public function success()
{
    $this->model->update($this->form_data);
}

`$form_data`

当前表单中存在的数据的数组。此数据以每个字段名称作为键。

示例

$name = $this->form_data['name'];

`$storage_disk`

设置用于文件上传的磁盘的静态属性。默认为 public。

示例

private static $storage_disk = 's3';

或者，通过 .env 应用全局

FORM_STORAGE_DISK="s3"

`$storage_path`

这是一个静态属性，用于设置文件上传的路径。默认为 uploads。

示例

private static $storage_path = 'avatars';

或者，通过 .env 应用全局

FORM_STORAGE_PATH="avatars"

表单组件方法

`fields()`

此方法返回用于表单的 Field 数组。

示例

public function fields()
{
    return [
        Field::make('Name')->input()->rules('required'),
        Field::make('Email')->input('email')->rules(['required', 'email', 'unique:users,email']),
        Field::make('Password')->input('password')->rules(['required', 'min:8', 'confirmed']),
        Field::make('Confirm Password', 'password_confirmation')->input('password'),
    ];
}

声明 Field 与声明 Laravel Nova 字段类似。点击此处了解更多。

`rulesIgnoreRealtime()`

此方法用于在实时验证期间忽略规则。

示例

public function rulesIgnoreRealtime()
{
    return ['confirmed', new MyCustomRule];
}

`success()`

此方法定义当表单成功提交并通过验证时应该执行的操作。

示例

public function success()
{
    $this->form_data['password'] = Hash::make($this->form_data['password']);

    User::create($this->form_data);
}

`saveAndStayResponse()`

此方法定义通过“保存”按钮成功提交后的响应。

示例

public function saveAndStayResponse()
{
    return redirect()->route('users.edit', $this->model->id);
}

`saveAndGoBackResponse()`

此方法定义通过“保存并返回”按钮成功提交后的响应。

示例

public function saveAndGoBackResponse()
{
    return redirect()->route('users.index');
}

`mount($model = null)`

此方法设置表单的初始属性。如果您需要覆盖它，请确保调用 $this->setFormProperties()。

`$model`

传递给表单组件的模型实例。

示例

public function mount($model = null)
{
    $this->setFormProperties();
    
    // my custom code
}

`render()`

此方法渲染表单组件视图。如果您需要覆盖它，请确保返回 $this->formView()。

示例

public function render()
{
    // my custom code
    
    return $this->formView();
}

表单字段声明

使用 Field 类来声明您的表单字段。

public function fields()
{
    $brand_options = Brand::orderBy('name')->get()->pluck('id', 'name')->all();

    return [
        Field::make('Brand', 'brand_id')->select($brand_options)->help('Please select a brand.'),
        Field::make('Name')->input()->rules(['required', Rule::unique('cars', 'name')->ignore($this->model->id)]),
        Field::make('Photos')->file()->multiple()->rules('required'),
        Field::make('Color')->select(['Red', 'Green', 'Blue']),
        Field::make('Owners')->array([
            ArrayField::make('Name')->input()->placeholder('Name')->rules('required'),
            ArrayField::make('Phone')->input('tel')->placeholder('Phone')->rules('required'),
        ])->rules('required'),
        Field::make('Insurable')->checkbox()->placeholder('Is the car insurable?')->rules('accepted'),
        Field::make('Fuel Type')->radio(['Gas', 'Diesel', 'Electric'])->default('Diesel'),
        Field::make('Features')->checkboxes(['Stereo', 'Bluetooth', 'Navigation'])->rules('required|min:2'),
        Field::make('Description')->textarea(),
    ];
}

`make($label, $name = null)`

`$label`

用于表单字段的标签，例如 First Name。

`$name`

用于表单字段的名称。如果为 null，则使用 $label 的蛇形命名。

基本字段示例

Field::make('First Name')->input()->rules('required|min:2'),

关系字段示例

$brand_options = Brand::orderBy('name')->get()->pluck('id', 'name')->all();

return [
    Field::make('Brand', 'brand_id')->select($brand_options)->rules(['required', Rule::exists('brands', 'id')]),
    ...

`input($type = 'text')`

将字段设置为 input 元素。默认为 text。

`$type`

可选的 HTML5 输入类型，用于输入。

示例

Field::make('Email Address')->input('email'),

`file()`

将字段设置为 file 输入元素。

文件字段应具有可空 text 数据库列，并在您的模型中转换为 array。此数组将为每个文件提供有用的信息，包括 file、disk、name、size 和 mime_type。

示例迁移

$table->text('photos')->nullable();

示例模型转换

protected $casts = ['photos' => 'array'];

示例字段声明

Field::make('Photos')->file(),

您可以使用 multiple() 方法允许选择多个文件

Field::make('Photos')->file()->multiple(),

`textarea($rows = 2)`

将字段设置为textarea元素。

`$rows`

用于textarea的行数。默认为2。

示例

Field::make('Description')->textarea(5),

`select($options = [])`

将字段设置为select下拉元素。

`$options`

用于select的选项数组。

使用顺序数组的示例

Field::make('Colors')->select(['Red', 'Green', 'Blue']),

使用关联数组的示例

Field::make('Colors')->select(['Red' => '#ff0000', 'Green' => '#00ff00', 'Blue' => '#0000ff']),

当使用关联数组时，键将用于选项标签，值用于选项值。

`checkbox()`

将字段设置为checkbox元素。

复选框字段应该有一个可空的boolean数据库列。

示例迁移

$table->boolean('accepts_terms')->nullable();

示例字段声明

Field::make('Accepts Terms')->checkbox()->placeholder('Do you accept our TOS?')->rules('accepted'),

如果指定了placeholder()，则将其用作复选框标签。

`checkboxes($options = [])`

将字段设置为多个checkbox元素。

`$options`

用于复选框的选项数组。与select()方法相同。

复选框字段应该有一个可空的text数据库列，并在模型中转换为array。

示例迁移

$table->text('features')->nullable();

示例模型转换

protected $casts = ['features' => 'array'];

示例字段声明

Field::make('Features')->checkboxes(['Stereo', 'Bluetooth', 'Navigation'])->rules('required|min:2'),

`radio($options = [])`

将字段设置为radio元素。

`$options`

用于单选框的选项数组。与select()方法相同。

示例

Field::make('Fuel Type')->radio(['Gas', 'Diesel', 'Electric'])->default('Diesel'),

`array($fields = [])`

将字段设置为字段的数组。

`$fields`

用于的ArrayField数组。有关更多信息，请跳转到数组字段声明部分。

示例

Field::make('Owners')->array([
    ArrayField::make('Full Name')->input()->placeholder('Full Name')->rules('required'),
    ArrayField::make('Phone Number')->input('tel')->placeholder('Phone Number'),
]),

使用sortable()方法使数组字段可排序

Field::make('Owners')->array([
    ArrayField::make('Full Name')->input()->placeholder('Full Name')->rules('required'),
    ArrayField::make('Phone Number')->input('tel')->placeholder('Phone Number'),
])->sortable(),

`default($default)`

设置用于字段的默认值。

`$default`

默认值。

示例

Field::make('City')->input()->default('Toronto'),

`autocomplete($autocomplete)`

设置用于字段的自动完成值。

`$autocomplete`

自动完成值。

示例

Field::make('Password')->input('password')->autocomplete('new-password'),

`placeholder($placeholder)`

设置用于字段的占位符值。

`$placeholder`

占位符值。

示例

Field::make('Country')->input()->placeholder('What country do you live in?'),

`help($help)`

设置用于字段的帮助文本。

`$help`

帮助文本。

示例

Field::make('City')->input()->help('Please enter your current city.'),

`rules($rules)`

为字段设置要使用的 Laravel 验证规则。

`$rules`

字符串或 Laravel 验证规则的数组。

使用字符串的示例

Field::make('Name')->input()->rules('required|min:2'),

使用数组的示例

Field::make('City')->input()->rules(['required', Rule::in(['Toronto', 'New York']), new MyCustomRule]),

`view($view)`

为字段设置自定义视图。对于包中未包含的更复杂字段元素，非常有用。

`$view`

自定义视图。

自定义视图文件示例

{{-- fields/custom-field.blade.php --}}
<div class="form-group row">
    <label for="{{ $field->name }}" class="col-md-2 col-form-label text-md-right">
        {{ $field->label }}
    </label>

    <div class="col-md">
        <input
            id="{{ $field->name }}"
            type="text"
            class="custom-field-class form-control @error($field->key) is-invalid @enderror"
            wire:model.lazy="{{ $field->key }}">

        @include('laravel-livewire-forms::fields.error-help')
    </div>
</div>

自定义视图会传递 $field、$form_data 和 $model 变量，以及任何其他公共组件属性。

自定义视图字段声明示例

Field::make('Custom Field')->view('fields.custom-field');

数组字段声明

ArrayField 与 Field 有所不同。它们应在字段 array() 方法内部声明。它们有大部分相同的方法，除了 file() 和 array() 方法。它们还有一个 columnWidth() 方法，这在 Field 中不可用。

`make($name)`

`$name`

用于数组字段的名称，例如 phone_number。数组字段不使用标签。相反，您应该为它们指定一个 placeholder()。

示例

ArrayField::make('phone_number')->input('tel')->placeholder('Phone Number')->rules('required'),

`columnWidth($width)`

可选的 Bootstrap 4 网格列宽，用于桌面上的数组字段。如果未设置，则默认情况下列将均匀地适应网格。

示例

ArrayField::make('province')->select(['AB', 'BC', 'ON'])->placeholder('Province')->columnWidth(4),

您还可以使用 auto 使列自动适应数组字段的宽度

ArrayField::make('old_enough')->checkbox()->placeholder('Old Enough')->columnWidth('auto'),

发布文件

发布文件是可选的。

发布表单视图文件

php artisan vendor:publish --tag=form-views

发布配置文件

php artisan vendor:publish --tag=form-config

kdion4891 / laravel-livewire-forms

维护者

详细信息

README

Laravel Livewire Forms

安装

制作表单组件

使用表单组件

表单组件属性

$model

$form_data

$storage_disk

$storage_path

表单组件方法

fields()

rulesIgnoreRealtime()

success()

saveAndStayResponse()

saveAndGoBackResponse()

mount($model = null)

$model

render()

表单字段声明

make($label, $name = null)

$label

$name

input($type = 'text')

$type

file()

textarea($rows = 2)

$rows

select($options = [])

$options

checkbox()

checkboxes($options = [])

$options

radio($options = [])

$options

array($fields = [])

$fields

default($default)

$default

autocomplete($autocomplete)

$autocomplete

placeholder($placeholder)

$placeholder

help($help)

$help

rules($rules)

$rules

view($view)

$view

数组字段声明

make($name)

$name

columnWidth($width)

发布文件

`$model`

`$form_data`

`$storage_disk`

`$storage_path`

`fields()`

`rulesIgnoreRealtime()`

`success()`

`saveAndStayResponse()`

`saveAndGoBackResponse()`

`mount($model = null)`

`$model`

`render()`

`make($label, $name = null)`

`$label`

`$name`

`input($type = 'text')`

`$type`

`file()`

`textarea($rows = 2)`

`$rows`

`select($options = [])`

`$options`

`checkbox()`

`checkboxes($options = [])`

`$options`

`radio($options = [])`

`$options`

`array($fields = [])`

`$fields`

`default($default)`

`$default`

`autocomplete($autocomplete)`

`$autocomplete`

`placeholder($placeholder)`

`$placeholder`

`help($help)`

`$help`

`rules($rules)`

`$rules`

`view($view)`

`$view`

`make($name)`

`$name`

`columnWidth($width)`