laravel form components

节省时间并利用一组动态，即时使用和完全可定制的表单组件。

组件是LiveWire兼容的，可以与以下UI框架一起使用：

• Bootstrap 5
• 引导4
• parwindcss 3（即将发行的功能）

发现此包装有帮助吗？请考虑支持我的工作！

兼容性

拉拉维尔	Livewire	php	包裹
^9.0 | ^10.0	^2.0	8.1。* | 8.2。*	^1.2
^8.0 | ^9.0	^2.0	^8.1 | ^8.2	^1.1
^8.0 | ^9.0	^2.0	^8.0 | ^8.1	^1.0

升级指南

• 从Okipa/Laravel-Bootstrap-Component到Okipa/Laravel-Form-Component

用法示例

只需调用您在视图中需要的组件，然后让此软件包负责HTML生成的耗时部分。

< x:form::form class = " row " method = " PUT " :action = " route('user.update', $user) " :bind = " $user " >
    < div class = " col-md-6 " >
        < x:form::input name = " name " />
        < x:form::input type = " email " name = " email " />
        < x:form::textarea name = " biography " :locales = " ['fr', 'en'] " />
    </ div >
    < div class = " col-md-6 " >
        < x:form::select name = " hobbies " :options = " [1 => 'Sport', 2 => 'Cinema', 3 => 'Literature', 4 => 'Travel'] " caption = " Select your favorite hobbies. " multiple />
        < x:form::checkbox name = " technologies " :group = " [1 => 'Laravel', 2 => 'Bootstrap', 3 => 'Tailwind', 4 => 'Livewire'] " inline />
        < x:form::radio name = " gender " :group = " [1 => 'Male', 2 => 'Female', 3 => 'Other'] " inline />
        < x:form::toggle-switch name = " active " />
    </ div >
    < div class = " col-12 mt-2 " >
        < x:form::button .link class = " btn-secondary me-3 " > {{ __ ( ' Cancel ' ) } } </ x:form::button .link >
        < x:form::button .submit />
    </ div >
</ x:form:form >

并显示这些组件：

目录

• 安装
• 配置
• 视图
• 成分
  • 形式
  • 输入
  • Textarea
  • 选择
  • 复选框
  • 转变
  • 收音机
  • 按钮
• 如何
  • 处理属性和类
  • 设置ID
  • 管理标签和占位符
  • 处理浮动标签显示
  • 设置插件
  • 绑定数据
  • 设置自定义值
  • 处理验证状态和错误
  • 添加标题
  • 激活多语言模式
  • 用Livewire插上
• 测试
• ChangElog
• 贡献
• 学分
• 执照

安装

您可以通过作曲家安装软件包：

composer require okipa/laravel-form-components

配置

您可以使用以下方式发布配置文件

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

在其配置中，此软件包允许您选择使用哪个UI框架。

请注意，在使用此软件包之前，您必须安装和配置要使用的UI框架。

视图

您可以在必要时发布软件包视图以自定义：

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

成分

形式

组件可以包装到形式组件中。

如果未设置自定义方法，则将默认设置GET方法。

根据定义的表单方法，将在需要时自动生成隐藏的CSRF和欺骗方法字段：

• 您不需要定义@method()指令，直接在action属性中声明您的PUT ， PATCH或DELETE操作
• 您不需要定义@csrf()指令，它将通过POST ， PUT ， PATCH和DELETE操作自动声明

表格是用默认的novalidate HTML属性生成的，该属性阻止浏览器验证以支持服务器端验证（这是安全事项的好实践）。

< x:form::form method = " PUT " >
    < x:form::input name = " first_name " />
    ...
</ x:form::form >

输入和文本方面

将输入和textarea添加到您的表格中。

如果您不将自定义类型设置为输入，则将使用默认的text类型。

收音机，复选框和按钮输入必须与自己的组件一起使用，因为它们的行为不同。

TextArea组件可以与输入组件相同，但不声明类型。

< x:form::input type = " file " name = " avatar " />
< x:form::input name = " first_name " />
< x:form::input type = " email " name = " email " />
...
< x:form::textarea name = " description " />

选择

在您的表格中设置选择组件。

通过提供关联值/标签数组来生成选项。

html选择元素本来不接受占位符属性，但是选择组件允许您处理占位符的选项。该占位符将表现为其他组成部分。

默认情况下，选择，禁用和隐藏此选择的占位符选项。但是，如果您需要设置一个nullable字段，则可以允许选择它。为此，只需将allowPlaceholderToBeSelected属性添加到您的组件中即可。

在多种模式下，此软件包将注意将名称转换为数组名称，因此您不必手动添加它。

 @php ( $options = [ 1 => ' Laravel ' , 2 => ' Bootstrap ' , 3 => ' Tailwind ' , 4 => ' Livewire ' ] )
< x:form::select name = " hobby " placeholder = " What is your hobby prefered hobby? " :options = " $options " selected = " 1 " />
< x:form::select name = " hobbies " :options = " $options " :selected = " [2, 3] " allowPlaceholderToBeSelected multiple /> {{-- You'll be able to selected the placeholder and the name will be converted to hobbies[] --}}

复选框，切换开关和收音机

可以使用复选框，切换开关和无线电组件。

由于无线电输入永远不会单独使用，因此您必须在使用它们时声明所需的group属性，等待一个值/标签的关联数组，从中生成无线电字段。

关于复选框和切换开关输入，您可以在单个或组模式下使用它们。要在组模式下使用它们，您也必须声明一个group属性。

在组模式下，此软件包将注意将名称转换为数组名称，因此您不必手动添加它。

如果要在线显示这些输入组件，只需定义一个inline属性即可。

< x:form::checkbox name = " newsletter_subscription " :checked = " true " /> {{-- 1 generated checkbox --}}
< x:form::checkbox name = " technologies " :group = " ['laravel' => 'Laravel', 'bootstrap' => 'Bootstrap'] " :checked = " laravel " /> {{-- 2 generated checkboxes --}}
< x:form::toggle-switch name = " active " :checked = " false " inline /> {{-- 1 generated toggle switch with inline mode --}}
< x:form::toggle-switch name = " technologies " :group = " ['tailwind' => 'Tailwind', 'livewire " => 'Livewire']" :checked="livewire"/> {{-- 2 generated toggle switches --}}
< x:form::radio name = " gender " :group = " ['female' => 'Female', 'male' => 'Male'] " :checked = " male " inline /> {{-- 2 generated radios with inline mode --}}

按钮

提交和链接按钮组件可用。

提交按钮允许您触发表格，如果没有定义，则将提供默认的__('Submit')主体。

链接按钮允许您通过提供类似按钮的显示器提供链接来设置Back的操作或Cancel表格中的操作。由于此组件是HTML链接，因此它将通过分析其身体来提供默认标题。

默认情况下，如果未定义自定义类属性，则两个组件将设置基本背景颜色。

< x:form::form >
    ...
    < div class = " d-grid " >
        < x:form::button .submit >Submit this form</ x:form::submit > {{-- Will provide `btn-primary` class with Bootstrap UI --}}
        < x:form::button .link class = " btn-secondary " href = " {{ back () } } " > {{-- Will auto-generate `title="Back"` --}}
            < i class = " fas fa-undo fa-fw " ></ i >
            Back
        </ x:form::submit >
    </ div >
</ x:form::form >

如何

处理属性和类

提供的组件是使用刀片组件构建的。

按照刀片组件的工作方式，您可以设置任何HTML属性和类：

• 属性将替换默认
• 课程将合并到现有的课程

设置ID

像对任何HTML元素一样定义组件ID。

如果未设置自定义ID，则将使用烤肉箱壳<type>-<name>值生成一个ID。

< x:form::input id = " custom-id " name = " first_name " /> {{-- Default id: `input-first-name` --}}

< x:form::textarea id = " custom-id " name = " first_name " /> {{-- Default id: `textarea-first-name` --}}

启用或禁用输入保证金底部

默认情况下，所有输入组件都将声明底部边距，以便以形式正确定位自己。

有时您需要禁用此默认的底部边距：您可以通过将marginBottom属性设置为false来做到这一点。

< x:form::input name = " first_name " /> {{-- Will declare a bottom margin --}}

< x:form::textarea name = " first_name " :marginBottom = " false " /> {{-- Will not declare any bottom margin --}}

管理标签和占位符

您可以在所有输入组件（无线电除外）上定义标签。

如果未定义自定义标签，标签将采用__('validation.attributes.<name>)默认值。

遵循相同的行为，所有允许使用placeholder的输入组件（包括选择）将提供一个默认占位符，以占据label值。

您可以通过设置自定义占位符来覆盖此默认值。

您还可以将自动生成的标签和占位符隐藏为false 。

< x:form::input name = " first_name " label = " First Name " placeholder = " Please fill your first name... " /> {{-- Will display the custom label and placeholder --}}
< x:form::input name = " last_name " :label = " false " :placeholder = " false " /> {{-- Will hide the label and placeholder --}}
< x:form::input type = " tel " name = " phone_number " /> {{-- Will display default auto-generated label and placeholder --}}

处理浮动标签显示

此软件包允许您启用或禁用显示浮动标签。

您可以使用config('form-components.floating_label')配置设置全局浮动标签行为。

对于所有包含的组件，您将能够以形式级别覆盖这种全局行为。

< x:form::form :floatingLabel = " true " >
    < x:form::input name = " first_name " /> {{-- Will display a floating label even if it has been disabled in config --}}
</ x:form::form >

最后，您还可以覆盖组件本身上所有其他定义的行为。

    < x:form::input name = " first_name " :floatingLabel = " true " />

设置插件

您可以在输入和TextAarea组件上定义prepend并append HTML附加组件。

    < x:form::input name = " " prepend = " <i class= " fas fa-code fa-fw " ></i> " />
    < x:form::input name = " search " append = " <i class= " fas fa-search fa-fw " ></i> " />

注意：您可以直接使用HTML而不是组件进行复杂的插件管理。

绑定数据

您可以绑定雄辩的模型，对象，集合或数组，以自动填充绑定的组件值。

形式组件上的绑定数据将触发其所有包含组件的结合。

您可以将数据直接绑定在组件上，并覆盖形式的绑定。

如果发生验证误差，则组件将由覆盖界值的旧值重新填充。

对于特定用例，您还可以使用@bind($boundDataBatch)和@endbind刀片指令来绑定一组组件。

 @php
    $dataBatch1 = [ ' description ' => ' A wonderful description ' ];
    $dataBatch2 = [ ' first_name ' => ' John ' , ' last_name ' => ' Bonham ' ];
@endphp
< x:form::form :bind = " $user " >
    < x:form::input type = " email " name = " email " /> {{-- Will set the value from `$user->email` --}}
    < x:form::textarea name = " description " :bind = " $dataBatch1 " /> {{-- Will set the value from `$dataBatch1['description`] --}}
    @bind ( $dataBatch2 )
        < x:form::input name = " first_name " /> {{-- Will set the value from `$dataBatch2['first_name`] --}}
        < x:form::input name = " last_name " /> {{-- Will set the value from `$dataBatch2['last_name`] --}}
    @endbind
</ x:form::form >

设置自定义值

可以通过在组件上设置自定义值来覆盖数据绑定。

 @php ( $data = [ ' description ' => ' A wonderful description ' ]; )
< x:form::form :bind = " $user " >
    ...
    < x:form::textarea
        name = " description "
        :bind = " $user "
        :value = " $data['description'] " /> {{-- Will set the value from `$data['description`] --}}
</ x:form::form >

处理验证状态和错误

触发验证错误时，组件将能够显示或隐藏其成功/错误状态和错误消息：

• 如果激活显示成功的验证成功，则只有在将表格中的其他组件检测为无效时，组件才会被标记为有效
• 如果激活了验证故障显示，则错误的组件将被标记为无效的组件，并将显示其相关错误消息

您可以在不同层面控制此行为：

• 用config('form-components.display_validation_success')和config('form-components.display_validation_failure')定义全局默认行为
• 在表单上自定义此行为，并将其本地应用于其所有包含的组件
• 直接在组件上设置特定行为

< x:form::form displayValidationSuccess = " false " displayValidationFailure = " false " >
    < x:form::input type = " email " name = " email " /> {{-- Disabled success/error statuses and error message --}}
    < x:form::textarea
        name = " description "
        displayValidationSuccess = " true "
        displayValidationFailure = " true " /> {{-- Enabled success/error statuses and error message --}}
</ x:form::form >

您还可以自定义错误的错误袋，该错误袋应用于确定组件上的组件成功/错误状态和错误消息。

< x:form::form errorBag = " form_error_bag " > {{-- Error bag for all components within the form --}}
    @errorbag ( ' group_error_bag ' ) {{-- Error bag for a group of components --}}
        < x:form::input name = " first_name " />
        < x:form::input name = " last_name " />
    @enderrorbag
    < x:form::input type = " email " name = " email " errorBag = " component_error_bag " /> {{-- Error bag for a specific component --}}
    ...
</ x:form::form >

添加标题

通过添加字幕来帮助用户并在组件下方显示其他说明。

    < x:form::input name = " name " caption = " Please fill this input with your full name. " />

激活多语言模式

激活input和textarea组件上的多语言模式，以从以下功能中受益：

• 组件重复：将显示每个区域的一个组件
• 名称本地化： name="description"将被转换为name="description[<locale>]"
• 默认标签和错误消息本地化： __(validation.attributes.name)用于生成默认标签和错误消息的翻译将与(<LOCALE>)一起附加

< x:form::input name = " name " :locales = " ['fr', 'en'] " />
< x:form::textarea name = " description " :locales = " ['fr', 'en'] " />

用Livewire插上

形式和输入组件与LiveWire兼容。

与其定义wire:model HTML属性在每个组件上，要像没有此软件包的情况下要进行的电线一样，在这里您只需要定义一条wire="<optional-modifier>" html属性即可完成此工作。

每个有线输入组件将使用其自己的name属性并将其转换为有效的wire:model="<name>"一个。

< x:form::form wire:submit.prevent = " submit " >
    < x:form::input name = " name " /> {{-- Will not be wired --}}
    < x:form::input type = " email " name = " email " wire /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
    < x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
    < x-form::submit />
</ x:form::form >

遵循相同的逻辑，您还可以直接从包含的形式直接接线输入组件。

< x-form::form wire:submit.prevent = " submit " wire >
    < x-form::input type = " email " name = " email " /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
    < x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
    < x-form::submit />
</ x:form::form >

对于特定的用例，您还可以使用@wire($modifier)和@endwire Blade指令将一组组件与特定的LiveWire修饰符接线。

< x-form::form wire:submit.prevent = " submit " wire = " lazy " >
    < x-form::input name = " first_name " /> {{-- Will bind the value from the Livewire component `$first_name` property with the `lazy` Livewire modifier --}}
    @wire ( ' debounce.150ms ' )
        < x-form::input name = " last_name " /> {{-- Will bind the value from the Livewire component `$last_name` property with the `debounce.150ms` Livewire modifier --}}
    @endbind
    @wire ( null )
        < x-form::input type = " email " name = " email " /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
        < x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
    @endbind
    < x-form::submit />
</ x-form::form >

测试

composer test 

ChangElog

有关最近发生了变化的更多信息，请参见ChangElog。

贡献

请有关详细信息，请参阅贡献。

安全漏洞

请查看我们有关如何报告安全漏洞的安全政策。

学分

• 亚瑟·洛伦特（Arthur Lorent）
• 所有贡献者

执照

麻省理工学院许可证（麻省理工学院）。请参阅许可证文件以获取更多信息。