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 theFOSRestBundle's documentation .

Answer 2

Probably not because your form is intended for server use: validation/show errors/data normalization/sanatization/etc.

Usually you use React to display HTML and connect it to your server using an API.