README

此Sprinkle提供了辅助类、Twig模板和JavaScript插件，用于根据UserFrosting的验证模式生成HTML表单、模态框和确认模态框。

帮助和贡献

如果您需要使用此Sprinkle的帮助或发现任何错误，请随时提交问题或提交拉取请求。您通常可以在UserFrosting聊天中找到我，以获得直接支持。

版本和UserFrosting支持

安装

要将FormGenerator安装到您的Sprinkle中

通过Composer安装FormGenerator

composer require lcharette/uf_formgenerator "~5.1.0"

将 UserFrosting\Sprinkle\FormGenerator\FormGenerator 添加到您的Sprinkle Recipe sprinkle方法中。

要使用前端助手，首先安装npm依赖项

npm install --save @lcharette/formgenerator@~5.1.0

然后添加此条目到您的 webpack.config.js 中的 sprinkles 列表

FormGenerator: require('@lcharette/formgenerator/webpack.entries'),

您想使用前端助手的每个模板文件，请将此行添加到 {% block scripts_page %}
```
{{ encore_entry_script_tags('widget.formGenerator') }}
```
运行 php bakery bake 完成Sprinkle的安装。

或者，您可以在应用程序的主要js文件中全局添加 @lcharette/formgenerator/app/assets/js/widget-formGenerator.js。

工作示例

public/ 目录作为FormGenerator的示例。您可以克隆此存储库，并像任何UserFrosting 5 Sprinkle一样安装它

composer install
php bakery bake
php -S localhost:8080 -t public

此演示未链接到任何数据库表，因此更改实际上不会保存 ;)

功能和用法

在开始使用 FormGenerator 之前，您应该阅读主UserFrosting指南，以熟悉 验证模式：(https://learn.userfrosting.com/routes-and-controllers/client-input/validation)

表单生成

在模式中定义字段

此Sprinkle使用UserFrosting用于验证表单数据的模式来构建表单。为此，只需将一个新的 form 键添加到在 schema 文件中找到的字段。

例如，这是一个用于验证创建 project 的表单的简单 schema。表单将包含 name、description 和 status 字段。

{
    "name" : {
        "validators" : {
            "length" : {
                "min" : 1,
                "max" : 100
            },
            "required" : {
                "message" : "PROJECT.VALIDATE.REQUIRED_NAME"
            }
        }
    },
    "description" : {
        "validators" : {}
    },
    "status" : {
        "validators" : {
            "member_of" : {
                "values" : [
                    "0", "1"
                ]
            },
            "required" : {
                "message" : "PROJECT.VALIDATE.STATUS"
            }
        }
    }
}

注意：FormGenerator与json和YAML模式一起使用。

在此阶段，在典型的UserFrosting设置中，您会进入控制器和Twig文件，手动创建您的HTML表单。如果您只有两到三个字段，这可能会很轻松，但如果有一打或更多的字段，那就很痛苦。这就是FormGenerator在新的 form 属性的帮助下介入的地方。让我们将它添加到我们的 project 表单中

{
    "name" : {
        "validators" : {
            "length" : {
                "min" : 1,
                "max" : 100
            },
            "required" : {
                "message" : "VALIDATE.REQUIRED_NAME"
            }
        },
        "form" : {
            "type" : "text",
            "label" : "NAME",
            "icon" : "fa-flag",
            "placeholder" : "NAME"
        }
    },
    "description" : {
        "validators" : {},
        "form" : {
            "type" : "textarea",
            "label" : "DESCRIPTION",
            "icon" : "fa-pencil",
            "placeholder" : "DESCRIPTION",
            "rows" : 5
        }
    },
    "status" : {
        "validators" : {
            "member_of" : {
                "values" : [
                    "0", "1"
                ]
            },
            "required" : {
                "message" : "VALIDATE.STATUS"
            }
        },
        "form" : {
            "type" : "select",
            "label" : "STATUS",
            "options" : {
                "0" : "Active",
                "1" : "Disabled"
            }
        }
    }
}

让我们更仔细地看看 name 字段

"form" : {
    "type" : "text",
    "label" : "PROJECT.NAME",
    "icon" : "fa-flag",
    "placeholder" : "PROJECT.NAME"
}

在这里，您可以看到我们为这个name字段定义了type、label、icon和placeholder的值。您可以定义任何标准的表单属性，以及icon、label和default属性。如果需要，您的模式中还可以定义data-*属性。对于

lcharette / uf_formgenerator

维护者

详细信息