Symfony - lepszy form

Kontynuujemy poznawanie formularzy w Symfony. Lekcja krótka i przyjemna – do dzieła!

Ok, na początku wyedytujemy add.html.twig:

{% extends 'base.html.twig' %}

{% block title %}Create New Post{% endblock %}

{% block body %}
  {{ form_start(form) }}
    <div>{{ form_errors(form)}}</div>

    <div>
      {{ form_label(form.title, 'Please enter the title') }}
    </div>
    <div>
      {{ form_widget(form.title, {'attr': {'style': 'color: gray'}})}}
    </div>

    <div>
      {{ form_label(form.content, 'Please enter the post text') }}
    </div>
    <div>
      {{ form_widget(form.content)}}
    </div>
     
    <div>
      <button type="submit">Save!</button>
    </div>
    
  {{ form_end(form) }}
  
{% endblock %}

Teraz musimy jeszcze usunąć submit z naszego form-buildera w metodach:

 #[Route('/micro_post/add', name: 'app_micro_post_add', priority: 2)]
    public function add(Request $request, EntityManagerInterface $entityManager): Response
    {
        $microPost = new MicroPost();
        $form = $this->createFormBuilder($microPost)
            ->add('title')
            ->add('content')
            ->getForm();

        $form->handleRequest($request);

            if ($form->isSubmitted() && $form->isValid()) {
                $post = $form->getData();
                $entityManager->persist($post);
                $entityManager->flush();
                $this->addFlash('success', 'Your micro post have been addded.');

                return $this->redirectToRoute('app_micro_post');
    
            }

        return $this->render(
            'micro_post/add.html.twig',
            [
                'form' => $form
            ]
        );
    }

    #[Route('/micro_post/{post}/edit', name: 'app_micro_post_edit')]
    public function edit(MicroPost $post, Request $request, EntityManagerInterface $entityManager): Response
    {
        
         $form = $this->createFormBuilder($post)
             ->add('title')
             ->add('content')
             ->getForm();
        
        $form->handleRequest($request);

            if ($form->isSubmitted() && $form->isValid()) {
                //$newpost = $form->getData();
                // $entityManager->persist($newpost);
                $entityManager->flush();
                $this->addFlash('success', 'Your micro post have been edited.');

                return $this->redirectToRoute('app_micro_post');
    
            }
        return $this->render(
            'micro_post/add.html.twig',
            [
                'form' => $form
            ]
        );
    }

Ok, już powinno działać. Natomiast teraz uprościmy sobie ten form builder. Używamy komendy:

symfony console make:form

Jako nazwę podajemy MicroPostType, jako nazwę klasy MicroPost. Utworzyło nam coś takiego:

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

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

Ok, importujemy w kontrolerze i upraszczamy metody add i edit:

#[Route('/micro_post/add', name: 'app_micro_post_add', priority: 2)]
    public function add(Request $request, EntityManagerInterface $entityManager): Response
    {
        $form = $this->createForm(MicroPostType::class, new MicroPost());

        $form->handleRequest($request);

            if ($form->isSubmitted() && $form->isValid()) {

                $post = $form->getData();
                $entityManager->persist($post);
                $entityManager->flush();
                
                $this->addFlash('success', 'Your micro post have been addded.');

                return $this->redirectToRoute('app_micro_post');
    
            }

        return $this->render(
            'micro_post/add.html.twig',
            [
                'form' => $form
            ]
        );
    }

    #[Route('/micro_post/{post}/edit', name: 'app_micro_post_edit')]
    public function edit(MicroPost $post, Request $request, EntityManagerInterface $entityManager): Response
    {
        
        $form = $this->createForm(MicroPostType::class, $post);
        
        $form->handleRequest($request);

            if ($form->isSubmitted() && $form->isValid()) {
    
                $entityManager->flush();

                $this->addFlash('success', 'Your micro post have been edited.');

                return $this->redirectToRoute('app_micro_post');
    
            }
        return $this->render(
            'micro_post/add.html.twig',
            [
                'form' => $form
            ]
        );
    }

Warto jeszcze zrobić porządek w widokach. Tworzymy _form.html.twig (obok add):

 {{ form_start(form) }}
    <div>{{ form_errors(form)}}</div>

    <div>
      {{ form_label(form.title, 'Please enter the title') }}
    </div>
    <div>
      {{ form_widget(form.title, {'attr': {'style': 'color: gray'}})}}
    </div>

    <div>
      {{ form_label(form.content, 'Please enter the post text') }}
    </div>
    <div>
      {{ form_widget(form.content)}}
    </div>
     
    <div>
      <button type="submit">Save!</button>
    </div>
    
  {{ form_end(form) }}

Teraz add ma wyglądać tak:

{% extends 'base.html.twig' %}

{% block title %}Create New Post{% endblock %}

{% block body %}
  {{ include ('micro_post/_form.html.twig') }}
  
{% endblock %}

Tworzymy też edit:

{% extends 'base.html.twig' %}

{% block title %}Edit Post{% endblock %}

{% block body %}
  {{ include ('micro_post/_form.html.twig') }}
  
{% endblock %}

I podmieniamy w metodzie:

#[Route('/micro_post/{post}/edit', name: 'app_micro_post_edit')]
    public function edit(MicroPost $post, Request $request, EntityManagerInterface $entityManager): Response
    {
        
        $form = $this->createForm(MicroPostType::class, $post);
        
        $form->handleRequest($request);

            if ($form->isSubmitted() && $form->isValid()) {
    
                $entityManager->flush();

                $this->addFlash('success', 'Your micro post have been edited.');

                return $this->redirectToRoute('app_micro_post');
    
            }
        return $this->render(
            'micro_post/edit.html.twig',
            [
                'form' => $form
            ]
        );
    }

Zobaczmy czy nam to wszystko działa i na spokojnie sobie przeanalizujmy.

Symfony – lepszy form