apility/form-builder

此包最新版本(v2.0.0)没有提供许可证信息。

Netflex SDK 的表单构建器基础库

v2.0.0 2022-08-09 09:13 UTC

This package is auto-updated.

Last update: 2024-09-09 13:19:17 UTC


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参数来做这件事。这样我们就可以在