Is it possible to use the Symfony form component with React.js?

Question

I am using the Symfony form component. I have many forms in my project.

To perfectly learn the form component was a long way to go, but now I love it. I love also the automatic validation and so on.

So. now I want to learn and use React.js in my project.

But it seems, there is no way I can use the validation and form builder like before for the projects? Am I right there?

Answer 1

While, in an API context, you won't use the Form Component to actually render your form in HTML format ($form->createView() method), you can still benefit from all the magic it offers: validation, form events, etc. API or not, I personnally think you should always use Form Types in Controller mutations.

For example, using FOSRestBundle, consider some simple Controller action looking like this:

/**
 * @Rest\Put("posts/edit/{id}", name="posts.edit", requirements={"id"="\d+"})
 *
 * @param Post $post
 * @param Request $request
 *
 * @return Post
 *
 * @throws BadRequestException
 *
 */
public function edit(Post $post, Request $request): Post
{
    $form = $this->createForm(PostType::class, $user);
    $form->handleRequest($request);
    $form->submit($request->request->all());
    if ($form->isValid()) {
        $em = $this->getDoctrine()->getManager();
        $em->persist($post);
        $em->flush();

        return $post;
    }

    // Any error handling of your taste.
    // You could consider expliciting form errors.
    throw new BadRequestException();
}

Note that Post entity and PostType form must be created, of course. I won't be detailing it here as there is nothing special to say about them in this context.

Also note that we don't check if the form is submitted. Rendering the form as HTML being React's job in your case, this action won't be used to GET anything, it is exclusively a PUT route. This means that any Request coming there MUST be a PUT Request containing the correct data to be handled by our PostType, submitted in your case by an HTML form manually built in React.

Furthermore, slightly out of the question's scope, FOSRestBundle subscribes to whatever your action returns and automatically serializes it to the configured format (let's say JSON in your case, I guess). This means that our example of action can return two possible responses:

• A Response with status code 200 containing our serialized Post. (You could also consider a 204 and return nothing.)
• A Response with status code 400 containing whatever we want (let's say form errors).

Allow me to lead you to the FOSRestBundle's documentation.

Answer 2

You can use your form created with the formBuilder without problem.

You must get your form with axios and create a new component like this:

const url = 'localhost/post/new';
const ref = useRef(null);

const [form, setForm] = useState('');    
const fetchData = () => {
        axios.get(url))
            .then(function (response){
                setForm(response.data);
            })
            .catch(function (error){
                //something
            })
        ;
    }

const MyComponent = () => {
        useEffect(() => {
            const element = ref.current.firstChild;
            if (ref.current.firstChild === null)
                return;

            element.addEventListener('submit', () => {handleSave(event)});
            return () => {
                element.removeEventListener('submit', () => {handleSave(event)});
            };
        }, []);

        return (
            <div ref={ref} dangerouslySetInnerHTML={{ __html: form }} />
        );
    };

const handleSave = (event) => {
        event.preventDefault();
        let formData = new FormData(event.target)
        let action = event.target.action;
        let files = event.target.querySelectorAll('[type="file"]');
        if (files)
            files.forEach((file) => {
                formData.set(file.name, file.files[0])
            });
        axios.post(action, formData)
            .then(function (response) {
                Swal.fire({
                    icon: 'success',
                    title: response.data.message,
                    showConfirmButton: false,
                    timer: 1500
                })
            //Do something else
            })
            .catch(function (error) {
                error.response.status === 422 ?
                    setForm(error.response.data)
                    :
                    console.log(error);
            });
    }

return (<MyComponent/>);

So, now you can get the form with html components and render it with the React Component.

If you get some validation error you get a 422 status and you can replace the form with setForm().

In your Symfony Controller you must set something like this:

#[Route('/post/{state}/{id}', name: 'post', defaults: ['state' => null, 'id' => null])]
public function post(
    ?string $state,
    ?int $id,
    Request $request,
    EntityManagerInterface $em
): JsonResponse|Response
{
    if ($state == 'new') {
        $post = new Post();
        $form = $this->createFormBuilder()
            ->add('title', TextType::class)
            ->add('content', TextareaType::class);

        $form = $form->getForm();
        $form->handleRequest($request);
        if ($form->isSubmitted() and $form->isValid()) {
            $em->persist($post);
            $em->flush();

            return $this->json(['message' => 'post added!'], 200);
        }

        return $this->renderForm('{{ form(form) }}', [
            'form' => $form
        ]);
    }
}

I have reduced the function only for the form, but you can use it for all your requests.