What is the best way to submit a form using Vue Axios in combination with Symfony 4

Question

What is the best way to submit a form using Vue Axios in combination with Symfony 4

Need help! I am struggling with sending data from my Vue app to Symfony using axios. Even though I try to send the data, the Symfony request doesn't seem to receive it.

Check out my controller code below:

$form = $this->createForm(TeacherType::class);
$form->submit($request->request->all());
$form->handleRequest($request);

if($form->isSubmitted() && !$form->isValid()) {
    return new JsonResponse([
        'code' => "400",
        'data' => $this->getErrorMessages($form),
    ]);
}

return new JsonResponse(array(
    'code' => 200,
));

This is how I am using axios:

sent() {
axios.post('http://localhost:8000/valid', {
     firstname: this.firstname
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}

Here's a snippet of my form:

<form @submit.prevent="sent" id="form" name="teacher" method="POST" action="#">
    <input type="text" name="teacher[firstname]" v-model="firstname">
    <button type="submit">OK</button>
</form>

I always get a response of {'code': 400} and an alert that the firstname should not be blank (I have set assert NotBlank for firstname in the form).

Any suggestions on what I might be doing wrong?

symfony vue.js vuejs2 axios

Answer 1

Answer №1

Don't forget to omit

$form->handleRequest($request);

, it doesn't work with API calls.

Update:

Here is a simple example for validating an entity:

Entity:

use Symfony\Component\Validator\Constraints as Assert;

class SomeClass
{
    /**
     * @Assert\NotBlank
     */
    private $content;
}

FormType:

class SomeType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('content', TextType::class)
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => SomeClass::class,
        ]);
    }
}

FormHandler:

class FormHandler
{
    private $formFactory;

    public function __construct(FormFactoryInterface $formFactory)
    {
        $this->formFactory = $formFactory;
    }

    public function handleWithSubmit(
        array $data,
        string $type,
        $entity,
        array $options = []
    ) {
        $form = $this->formFactory->create($type, $entity, $options);
        $form->submit($data);

        return $this->processSubmitted($form, $entity);
    }

    private function processSubmitted(FormInterface $form, $entity)
    {
        if (!$form->isValid()) {
            return $form->getErrors();
        }

        if (!is_object($entity)) {
            $entity = $form->getData();
        }

        return $entity;
    }
}

Inject FormHandler into the controller and make a call like this:

$handled = $this->formHandler->handleWithSubmit($request->request->all(), SomeType::class, new SomeClass());
if (!$handled instanceof SomeClass) {
    // return errors
}

Answer 2

Don't forget to omit

$form->handleRequest($request);

, it doesn't work with API calls.

Update:

Here is a simple example for validating an entity:

Entity:

use Symfony\Component\Validator\Constraints as Assert;

class SomeClass
{
    /**
     * @Assert\NotBlank
     */
    private $content;
}

FormType:

class SomeType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('content', TextType::class)
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => SomeClass::class,
        ]);
    }
}

FormHandler:

class FormHandler
{
    private $formFactory;

    public function __construct(FormFactoryInterface $formFactory)
    {
        $this->formFactory = $formFactory;
    }

    public function handleWithSubmit(
        array $data,
        string $type,
        $entity,
        array $options = []
    ) {
        $form = $this->formFactory->create($type, $entity, $options);
        $form->submit($data);

        return $this->processSubmitted($form, $entity);
    }

    private function processSubmitted(FormInterface $form, $entity)
    {
        if (!$form->isValid()) {
            return $form->getErrors();
        }

        if (!is_object($entity)) {
            $entity = $form->getData();
        }

        return $entity;
    }
}

Inject FormHandler into the controller and make a call like this:

$handled = $this->formHandler->handleWithSubmit($request->request->all(), SomeType::class, new SomeClass());
if (!$handled instanceof SomeClass) {
    // return errors
}

Answer 3

Answer №2

The reason for this issue is that the naming of your fields in the HTML document is incorrect.

Currently, it looks like this:

teacher[firstname]

However, it should actually be more like this:

teacher_teacher[firstname]

To resolve this, utilize a FormFactoryInterface to create a named form instead:

public function yourAction(Request $request, FormFactoryInterface $forms)
{
    $form = $this->forms->createNamed('', TeacherType::class);
    $form->handleRequest($request);

    if ($form->isSubmitted() && !$form->isValid()) {
        return new JsonResponse([
            'code' => '400',
            'data' => $this->getErrorMessages($form),
        ]);
    }

    return new JsonResponse(['code' => 200]);
}

When you create a form without a specified name (e.g.,

$this->createForm(TeacherType::class)

), a name will be automatically generated for you based on the form's class name without the words Form and Type, hence the necessity for the teacher_ prefix before the field names.

Answer 4

The reason for this issue is that the naming of your fields in the HTML document is incorrect.

Currently, it looks like this:

teacher[firstname]

However, it should actually be more like this:

teacher_teacher[firstname]

To resolve this, utilize a FormFactoryInterface to create a named form instead:

public function yourAction(Request $request, FormFactoryInterface $forms)
{
    $form = $this->forms->createNamed('', TeacherType::class);
    $form->handleRequest($request);

    if ($form->isSubmitted() && !$form->isValid()) {
        return new JsonResponse([
            'code' => '400',
            'data' => $this->getErrorMessages($form),
        ]);
    }

    return new JsonResponse(['code' => 200]);
}

When you create a form without a specified name (e.g.,

$this->createForm(TeacherType::class)

), a name will be automatically generated for you based on the form's class name without the words Form and Type, hence the necessity for the teacher_ prefix before the field names.

Answer 5

Answer №3

To set up the FOS Rest bundle, ensure that you have a serializer installed. The Symfony Serializer is recommended for this task.

https://symfony.com/doc/master/bundles/FOSRestBundle/1-setting_up_the_bundle.html

The main purpose of the FOS Rest bundle is to decode the HTTP request body and Accept headers, which are essential for processing the

$form->handleRequest($request)

function in order to display the submitted form.

Answer 6

To set up the FOS Rest bundle, ensure that you have a serializer installed. The Symfony Serializer is recommended for this task.

https://symfony.com/doc/master/bundles/FOSRestBundle/1-setting_up_the_bundle.html

The main purpose of the FOS Rest bundle is to decode the HTTP request body and Accept headers, which are essential for processing the

$form->handleRequest($request)

function in order to display the submitted form.

What is the best way to submit a form using Vue Axios in combination with Symfony 4

Answer №1

Answer №2

Answer №3

Similar questions

Converting an array of strings into an Entity using Symfony

Exploring ways to expand a field in Laravel Nova

Refresh the component following a successful POST request in Vue.js

[Vue Alert]: Render Error - "TypeError: Unable to retrieve the 'getters' property of an undefined object"

Having trouble utilizing Vue3 methods while utilizing the `<script setup lang="ts">` syntax

The useSlots property in VueJs encounters an error when used in conjunction with the array.map

How can Vue.js pass an array from a child component to its parent component?

Encountering difficulties when attempting to test Vue CSS styling

Exploring Vuetify: Navigating Through Sub-Menus on a Drawer

Creating a route-guard in a Vue.js/Firebase authentication system for secure navigation

Webpage video stalling due to buffering

Guide to integrating Google Maps into your Vue application using vue2-google-maps

Is your NativeScript dynamic array causing elements to disappear at the bottom of the screen?

Is Apollo & GraphQL caching a better alternative to using Vuex?

Bypass React Query execution when the parameter is null

Exploring Vue3: Implementing Highlight.js for Solidity code highlighting

Exploring Symfony 4: Implementing leftJoin on tables using doctrine annotations

Developing modular applications with Vue.js and leveraging locally installed NPM packages

Vue cannot compile Window.resize

What could be causing anime.js to malfunction when clicked in Vue.js?