README

不再维护，已迁移至 https://gitlab.com/precision-soft-open-source/symfony/json-form

您可以自由地进行分支和修改.

欢迎提出建议。

目的

该库的目的是创建用于单页应用、具有 symfony 后端的表单。表单在后台构建并序列化为 json，可在前端渲染。在 assets 文件夹中，您可以找到一个用于渲染表单的 react 组件。该表单有 2 个版本

• formV1，是渲染表单的原生 react 组件，保留以实现向后兼容。
• formV2，新组件，也是推荐渲染 json 的方式。

使用方法

将此内容添加到您的 services.yaml 文件中。

services:
    _instanceof:
        Drjele\Symfony\JsonForm\Service\Contract\AbstractFormService:
            calls:
                - [ setSerializer, [ '@serializer' ] ]

<?php

declare(strict_types=1);

/*
 * Copyright (c) Vivre
 */

namespace Acme\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Acme\Dto\ProductEditDto;
use Acme\Form\ProductEditForm;
use Acme\Service\ProductEditService;

class ProductController extends AbstractController
{
    public function edit(Request $request, ProductEditForm $productEditForm, ProductEditService $productEditService): Response
    {
        $id = $request->get('id');

        if (Request::METHOD_POST === $request->getMethod()) {
            /** @var ProductEditDto $dto */
            $dto = $productEditForm->handleRequest($request);

            $productEditService->save($dto);
        } else {
            $dto = $productEditService->createDto($id);
        }

        return $this->json(
            [
                'form' => $productEditForm->render($dto),
            ]
        );
    }
}

<?php

declare(strict_types=1);

/*
 * Copyright (c) Vivre
 */

namespace Acme\Dto;

use Drjele\Symfony\JsonForm\Contract\DtoInterface;

class ProductEditDto implements DtoInterface
{
    private int $id;
    private string $status;

    public function getId(): int
    {
        return $this->id;
    }

    public function setId(int $id): self
    {
        $this->id = $id;

        return $this;
    }

    public function getStatus(): string
    {
        return $this->status;
    }

    public function setStatus(string $status): self
    {
        $this->status = $status;

        return $this;
    }
}

<?php

declare(strict_types=1);

/*
 * Copyright (c) Vivre
 */

namespace Acme\Form;

use Acme\Dto\ProductEditDto;
use Drjele\Symfony\JsonForm\Element\ArrayElement;
use Drjele\Symfony\JsonForm\Element\NumberElement;
use Drjele\Symfony\JsonForm\Form\Action;
use Drjele\Symfony\JsonForm\Form\Form;
use Drjele\Symfony\JsonForm\Service\Contract\AbstractFormService;

class ProductEditForm extends AbstractFormService
{
    protected function getDtoClass(): string
    {
        return ProductEditDto::class;
    }

    protected function getAction(): Action
    {
        return new Action('product-edit');
    }

    protected function build(Form $form): void
    {
        $form->addElement(new NumberElement('id', 'Id'))
            ->addElement(new ArrayElement('status', 'Status', ['active' => 'Active', 'inactive' => 'Inactive']));
    }
}

<?php

declare(strict_types=1);

/*
 * Copyright (c) Vivre
 */

namespace Acme\Service;

use Acme\Dto\ProductEditDto;

class ProductEditService
{
    public function createDto(int $id): ProductEditDto
    {
        $dto = new ProductEditDto();

        $dto->setId($id);

        /* @todo populate all the data from the db */

        return $dto;
    }

    public function save(ProductEditDto $dto): void
    {
    }
}

React

使用 ./assets/react 文件夹中的组件来解析后端响应。The Config 组件是项目特定的。对我而言，它包含应用程序的区域设置上下文。它与

• willdurand/js-translation-bundle 集成以实现翻译器。
• friendsofsymfony/jsrouting-bundle 集成以实现 URL 生成器。

开发

git clone git@gitlab.com:drjele-symfony/json-form.git
cd json-form

rm -rf .git/hooks && ln -s ../dev/git-hooks .git/hooks

./dc build && ./dc up -d

待办事项

• 渲染和处理复杂类型，如 \DateTime。
• 单元测试。