apility / form-builder
Netflex SDK 的表单构建器基础库
Requires
- netflex/sdk: ^4
- netflex/structures: ^4
README
安装
将表单构建器添加到您的 composer 文件中
$ composer require apility/form-builder
创建一个新的服务提供程序,该程序扩展了 Netflex\FormBuilder\Providers\FormBuilderServiceProvider
$ php artisan form-builder:install
将生成一个新的服务提供程序,请务必注册它。
基本示例。
<?php namespace App\Providers; use Netflex\FormBuilder\Fields\TextInput; use Netflex\FormBuilder\Interfaces\FormFieldRepository; use \Netflex\FormBuilder\Providers\FormBuilderServiceProvider as FormBuilderBaseServiceProvider; class FormBuilderServiceProvider extends FormBuilderBaseServiceProvider { function boot(FormFieldRepository $repo) { $repo->registerField('text', TextInput::class); } }
registerField
方法注册了一个可以通过表单构建器渲染的问题/字段类型。您可以自己实现(请参阅下文说明)。提供的服务器类必须实现 Netflex\FormBuilder\Interfaces\FormField
类。
我们提供了一个基本实现,它包含预填充的工作簿功能,如 formModel 和名称注入,以及将从矩阵字段数据提升为模型属性。
使用它可能比手动实现类似功能更快。
查看 Netflex\FormBuilder\Fields\BaseField
类。
覆盖
您可以使用 registerField
函数的第三个可选参数覆盖来自 Netflex 的数据。您可以像这样向函数提供可选的关联数组
$repo->registerField('text', TextInput::class); $repo->registerField('always-required-text', TextInput::class, ['required' => true]);
这仅仅是用这些值替换了 Netflex 中的任何值,这样您就可以省略在类中可配置但用户不应该能够更改的字段。或者让您创建可重复使用的字段类型,这些类型在添加时可以进行配置。
您可以多次添加相同的类。
将服务提供程序添加到您的 bootstrap/app.php
$app->register(\App\Providers\FormBuilderServiceProvider::class);
其中一个是您自己制作的,另一个提供视图。
让您的表单模型实现 FormModel 接口
getFormAttributeKey
应该与包含表单问题的矩阵的别名相同。getErrorBagName
函数决定 FormBuilderRequests 的验证错误去哪里,这通常不应该是 default
。
<?php namespace App\Models; use Illuminate\Routing\Router; use Netflex\FormBuilder\Interfaces\FormModel; use Netflex\FormBuilder\Traits\DefaultFormFieldName; use Netflex\Structure\Model; class Form extends Model implements FormModel { use DefaultFormFieldName; /** * The directory_id associated with the model. * * @var int */ protected $relationId = 12345; // public function getFormAttributeKey(): string { return "fields"; } public function getErrorBagName(): string { return "form"; } }
DefaultFormFieldName
特性
模型必须声明一些被认为是微不足道的簿记,并且除了非常特定的情况外,开发者通常不需要关心这些簿记。此特性实现了此功能,因此开发者无需担心。
它所做的就是将所有字段的命名前缀默认为 "questions"。如果您想更改此字段,请手动实现相关方法。
实现自定义字段类型
类
为了创建自己的字段类型,创建一个扩展 Netflex\FormBuilder\Fields\BaseField
类的新类。这是一个既是 Laravel 视图又是特殊字段类的类,它要求您扩展某些变量。
BaseField 类代表您表单中的一个问题,并且对于每个实例化一次。
QOL 建议
- 只要您不覆盖 BaseField 类的构造函数,所有矩阵内容都会自动放在此对象上。换句话说;如果您在 Netflex 的矩阵块中有 "问题" 字段,则您可以通过
$this->question
使用它。
<?php namespace Netflex\FormBuilder\Fields; class TextInput extends BaseField { public $required; public $question; public $description; public function formQuestion(): string { return $this->question ?? "Question is missing"; } public function formDescription(): ?string { return $this->description; } function formValidators(): array { return $this->required ? ['required'] : []; } function formValidationMessages(): array { return [ 'required' => "Du må fylle inn '{$this->question}' feltet", ]; } public function render() { return view("form-builder::form-fields.text-input", [ 'question' => $this->question, 'description' => $this->description ]); } }
视图
它们基本上是正常组件。建议您在渲染这些组件时使用 view()
函数。
- 如果你的渲染方法返回 Laravel 视图对象(例如使用
view()
函数),则表单的错误将被提升到默认的 viewBag,这样您就不必手动获取正确的 viewBag 来解决特定字段的错误。 - 如果你的渲染方法返回 Laravel 视图对象,那么你也将只从变量
$fieldErrors
获取与你的当前字段相关的错误消息。
用法
该包旨在使用矩阵字段将 Netflex 结构条目转换为表单。它提供了一些简单的组件来渲染表单组件并进行验证。
您必须在表单请求被验证后提供自己的 <form>
标签和后端功能。这里的目的是我们提供处理所有表单特定功能的功能,但仍允许您以有机的方式使用 Laravel 来处理与表单无关的其他事务。
要开始,首先创建一个表单,使用任何具有实现 FormModel
接口模型的任何结构。
/// Find some entry based on whatever criteria you want $form = MyFormModel::find(12345);
渲染表单
您可以像这样渲染一个简单的表单。
您将一个 <x-form-builder::form>
组件包裹在表单标签中。
就是这样。
仍然可以添加自己的输入字段,这些字段不是表单的一部分。您需要手动解析它们,但这仍然是可能的。
<form action="{{ route('some.route-that-accepts-forms', $form) }}" method="post">
<input type="text" name="optional_hard_coded_field">
<x-form-builder::form :form="$form" />
<button class="submit-button">Send this form</button>
</form>
显示表单的所有错误
有时您可能需要一个大的警报,当用户提交表单且验证失败时,会列出所有失败的验证错误。为此,请使用 <x-form-builder::validation-errors>
组件。
<x-form-builder::validation-errors :form="$form" />
插槽
<x-form-builder::validation-errors>
组件有一个插槽,允许您在警报中输入文本和类似的内容,在验证错误列表的上方。
<x-form-builder::validation-errors :form="$form"> Oops, something went wrong. Check the contents of your form and try again </x-form-builder::validation-errors>
内置表单字段
该库包含一些内置的 Bootstrap 5 兼容字段,用于快速创建表单。
文本输入 (Netflex\FormBuilder\Fields\TextInput
)
所有参数都可以从 Netflex 控制如果添加到矩阵块定义中
参数
国际化
该字段使用以下国际化键
form-builder.question.text-input.required
该字段确定当字段为空时用户看到的消息。(不应发生,因为浏览器将对其进行验证)
可以在表中使用以下变量:name
返回问题
数值文本字段 (Netflex\FormBuilder\Fields\NumericTextInput
)
此文本字段被强制为数字字段。它还验证后端上的数字范围。占位符设置为 i18n 值,指示有效选项的可能上下限。
参数
国际化
该字段使用以下国际化键
-
form-builder.question.numeric-text-input.required
该字段确定当字段为空时用户看到的消息。(不应发生,因为浏览器将对其进行验证)
可以在表中使用以下变量:name
返回问题
-
form-builder.question.numeric-text-input.min
当用户选择的数字太低时显示给用户的消息
可以在表中使用以下变量:name
返回问题:count
返回最小值
-
form-builder.question.numeric-text-input.max
当用户选择的数字太高时显示给用户的消息
可以在表中使用以下变量:name
返回问题:count
返回最大值
-
form-builder.question.numeric-text-input.numeric
如果显示的数字不是数字时显示给用户的消息
可以在表中使用以下变量():name
返回问题
文本区域 (Netflex\FormBuilder\Fields\TextArea
)
多行文本区域
参数
接受与 TextInput 相同的字段(除 formType
之外),但还有
国际化
该字段使用以下国际化键
form-builder.question.numeric-text-area.required
该字段确定当字段为空时用户看到的消息。(不应发生,因为浏览器将对其进行验证)
可以在表中使用以下变量:name
返回问题
复选框 (Netflex\FormBuilder\Fields\Checkbox
)
显示单个复选框。如果需要,则必须勾选此框才能继续。这主要用于确认框。
参数
国际化
该字段使用以下国际化键
form-builder.question.checkbox.required
该字段确定当字段未勾选时用户看到的消息(如果它需要)
可以在表中使用以下变量:name
返回问题
选择 (Netflex\FormBuilder\Fields\Select
)
显示预选值的下拉列表
参数
国际化
该字段使用以下国际化键
form-builder.question.select.required
该字段确定当没有选择值时用户看到的消息(如果已设置 required)
可以在表中使用以下变量:name
返回问题
表单验证
该包附带一个增强版的Laravel HTTP类,可以自动验证表单字段。这意味着您可以为每个组件指定验证逻辑,而不必亲自处理,只要您使用Laravel表单请求。
$ php artisan make:form-builder
与make:request
类似,将创建一个标准的请求。
基本示例
<?php namespace App\Http\Requests\FormBuilder; use Illuminate\Foundation\Http\FormRequest; use Netflex\FormBuilder\Interfaces\Form; use Netflex\FormBuilder\Interfaces\FormModel; use Netflex\FormBuilder\Requests\FormBuilderRequest; class NormalFormRequest extends FormBuilderRequest { /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; } public function rules() { return [ ]; } /** * * Resolve the same form that you used to render the submitted form * * @return FormModel|null */ function getForm(): ?FormModel { // TODO: Resolve form } }
getForm
方法必须返回用于渲染提交表单的同一表单。我个人喜欢使用URL参数来做这件事。这样我们就可以在