Reworking for much simpler solution

Author: weaverryan

src/LiveComponent/src/ComponentWithFormTrait.php

@@ -58,11 +58,6 @@ trait ComponentWithFormTrait
     #[LiveProp(writable: true)]
     public array $validatedFields = [];
 
-    /**
-     * Internal flag to track if the form should be submitted on render.
-     */
-    private bool $didFormSubmit = false;
-
     /**
      * Return the full, top-level, Form object that this component uses.
      */
@@ -97,7 +92,7 @@ public function mount(FormView $form = null)
     #[BeforeReRender]
     public function submitFormOnRender(): void
     {
-        if (!$this->getFormInstance()->isSubmitted() && !$this->didFormSubmit) {
+        if (!$this->getFormInstance()->isSubmitted()) {
             $this->submitForm(false);
         }
     }
@@ -128,11 +123,13 @@ private function initializeFormValues(): void
         $this->formValues = $this->extractFormValues($this->getForm());
     }
 
-    private function submitForm(bool $validateAll = true, bool $throwOnValidationError = true): void
+    private function submitForm(bool $validateAll = true): void
     {
         $form = $this->getFormInstance();
         $form->submit($this->formValues);
-        $this->didFormSubmit = true;
+        // re-extract the "view" values in case the submitted data
+        // changed the underlying data or structure of the form
+        $this->formValues = $this->extractFormValues($this->getForm());
 
         if ($validateAll) {
             // mark the entire component as validated
@@ -146,26 +143,11 @@ private function submitForm(bool $validateAll = true, bool $throwOnValidationErr
             $this->clearErrorsForNonValidatedFields($form, $this->getFormName());
         }
 
-        if ($throwOnValidationError && !$form->isValid()) {
+        if (!$form->isValid()) {
             throw new UnprocessableEntityHttpException('Form validation failed in component');
         }
     }
 
-    /**
-     * Call this to rebuild the form objects.
-     *
-     * This is useful in action where you call $this->submitForm(),
-     * then, after, change some of the form's underlying data. By
-     * call this function, the form can rebuild using the new data.
-     */
-    private function refreshForm(): void
-    {
-        $this->formInstance = null;
-        $this->formView = null;
-        // re-initialize the form object and the formValues from it
-        $this->initializeFormValues();
-    }
-
     /**
      * Returns a hierarchical array of the entire form's values.
      *

src/LiveComponent/tests/Fixture/Component/FormThatResetsComponent.php renamed to src/LiveComponent/tests/Fixture/Component/FormWithCollectionTypeComponent.php

@@ -17,35 +17,34 @@
 use Symfony\UX\LiveComponent\Attribute\LiveAction;
 use Symfony\UX\LiveComponent\ComponentWithFormTrait;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\LiveComponent\Tests\Fixture\Dto\BlogPost;
+use Symfony\UX\LiveComponent\Tests\Fixture\Dto\Comment;
 use Symfony\UX\LiveComponent\Tests\Fixture\Entity\Entity1;
-use Symfony\UX\LiveComponent\Tests\Fixture\Form\FormForEntity1Type;
+use Symfony\UX\LiveComponent\Tests\Fixture\Form\BlogPostFormType;
 
-#[AsLiveComponent('form_that_resets')]
-class FormThatResetsComponent extends AbstractController
+#[AsLiveComponent('form_with_collection_type')]
+class FormWithCollectionTypeComponent extends AbstractController
 {
     use ComponentWithFormTrait;
     use DefaultActionTrait;
 
-    public Entity1 $entity1;
+    public BlogPost $post;
 
     public function __construct()
     {
-        $this->entity1 = new Entity1();
+        $this->post = new BlogPost();
+        // start with 1 comment
+        $this->post->comments[] = new Comment();
     }
 
     protected function instantiateForm(): FormInterface
     {
-        return $this->createForm(FormForEntity1Type::class, $this->entity1);
+        return $this->createForm(BlogPostFormType::class, $this->post);
     }
 
     #[LiveAction]
-    public function changeTextField()
+    public function addComment()
     {
-        // submit the values, but no further validation
-        $this->submitForm(false, false);
-
-        $this->entity1->name = 'changing name from action';
-
-        $this->refreshForm();
+        $this->formValues['comments'][] = [];
     }
 }

src/LiveComponent/tests/Fixture/Dto/BlogPost.php

@@ -0,0 +1,24 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\LiveComponent\Tests\Fixture\Dto;
+
+use Symfony\Component\Validator\Constraints\Length;
+
+class BlogPost
+{
+    public $title;
+
+    #[Length(min: 100)]
+    public $content;
+
+    public $comments = [];
+}

src/LiveComponent/tests/Fixture/Dto/Comment.php

@@ -0,0 +1,19 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\LiveComponent\Tests\Fixture\Dto;
+
+class Comment
+{
+    public ?string $content;
+
+    public ?BlogPost $blogPost;
+}

src/LiveComponent/tests/Fixture/Form/BlogPostFormType.php

@@ -0,0 +1,46 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Symfony\UX\LiveComponent\Tests\Fixture\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\LiveComponent\Tests\Fixture\Dto\BlogPost;
+
+class BlogPostFormType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder
+            ->add('title', TextType::class)
+            ->add('content', TextareaType::class)
+            ->add('comments', CollectionType::class, [
+                'entry_type' => CommentFormType::class,
+                'allow_add' => true,
+                'allow_delete' => true,
+            ])
+        ;
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        $resolver->setDefaults([
+            'csrf_protection' => false,
+            'data_class' => BlogPost::class,
+        ]);
+    }
+}

src/LiveComponent/tests/Fixture/Form/FormForEntity1Type.php renamed to src/LiveComponent/tests/Fixture/Form/CommentFormType.php

@@ -15,29 +15,24 @@
 
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\TextareaType;
-use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\OptionsResolver\OptionsResolver;
-use Symfony\UX\LiveComponent\Tests\Fixture\Entity\Entity1;
+use Symfony\UX\LiveComponent\Tests\Fixture\Dto\Comment;
 
-/**
- * @author Jakub Caban <[email protected]>
- */
-class FormForEntity1Type extends AbstractType
+class CommentFormType extends AbstractType
 {
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
         $builder
-            ->add('name', TextType::class)
-            ->add('description', TextareaType::class)
+            ->add('content', TextareaType::class)
         ;
     }
 
     public function configureOptions(OptionsResolver $resolver)
     {
         $resolver->setDefaults([
             'csrf_protection' => false,
-            'data_class' => Entity1::class,
+            'data_class' => Comment::class,
         ]);
     }
 }

src/LiveComponent/tests/Fixture/Kernel.php

@@ -27,7 +27,7 @@
 use Symfony\UX\LiveComponent\Tests\Fixture\Component\Component3;
 use Symfony\UX\LiveComponent\Tests\Fixture\Component\Component6;
 use Symfony\UX\LiveComponent\Tests\Fixture\Component\ComponentWithAttributes;
-use Symfony\UX\LiveComponent\Tests\Fixture\Component\FormThatResetsComponent;
+use Symfony\UX\LiveComponent\Tests\Fixture\Component\FormWithCollectionTypeComponent;
 use Symfony\UX\TwigComponent\TwigComponentBundle;
 use Twig\Environment;
 
@@ -70,6 +70,7 @@ protected function configureContainer(ContainerBuilder $c, LoaderInterface $load
         $c->register(Component6::class)->setAutoconfigured(true)->setAutowired(true);
         $c->register(ComponentWithAttributes::class)->setAutoconfigured(true)->setAutowired(true);
         $c->register(FormThatResetsComponent::class)->setAutoconfigured(true)->setAutowired(true);
+        $c->register(FormWithCollectionTypeComponent::class)->setAutoconfigured(true)->setAutowired(true);
 
         $c->loadFromExtension('framework', [
             'secret' => 'S3CRET',

src/LiveComponent/tests/Fixture/templates/components/form_that_resets.html.twig

@@ -0,0 +1,3 @@
+<div{{ attributes }}>
+    {{ form(this.form) }}
+</div>

src/LiveComponent/tests/Fixture/templates/components/form_with_collection_type.html.twig

@@ -14,6 +14,7 @@
 namespace Symfony\UX\LiveComponent\Tests\Functional\EventListener;
 
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+use Symfony\Component\DomCrawler\Crawler;
 use Symfony\UX\LiveComponent\LiveComponentHydrator;
 use Symfony\UX\TwigComponent\ComponentFactory;
 use Zenstruck\Browser\Response\HtmlResponse;
@@ -36,26 +37,46 @@ public function testRefreshForm(): void
         $hydrator = self::getContainer()->get('ux.live_component.component_hydrator');
         /** @var ComponentFactory $factory */
         $factory = self::getContainer()->get('ux.twig_component.component_factory');
-        $component = $factory->create('form_that_resets');
+        $component = $factory->create('form_with_collection_type');
 
         $dehydrated = $hydrator->dehydrate($component);
         $token = null;
 
         $this->browser()
-            ->throwExceptions()
-            ->get('/_components/form_that_resets?'.http_build_query($dehydrated))
+            ->get('/_components/form_with_collection_type?'.http_build_query($dehydrated))
             ->use(function (HtmlResponse $response) use (&$dehydrated, &$token) {
                 // mimic user typing
-                $dehydrated['form_for_entity1']['description'] = 'changed description by user';
+                $dehydrated['blog_post_form']['content'] = 'changed description by user';
+                $dehydrated['validatedFields'] = ['blog_post_form.content'];
                 $token = $response->crawler()->filter('div')->first()->attr('data-live-csrf-value');
             })
             // post to action, which will change the "name" field in the form
-            ->post('/_components/form_that_resets/changeTextField?'.http_build_query($dehydrated), [
+            ->post('/_components/form_with_collection_type/addComment?'.http_build_query($dehydrated), [
                 'headers' => ['X-CSRF-TOKEN' => $token],
             ])
-            ->assertSuccessful()
-            ->assertContains('value="changing name from action"')
+            ->assertStatus(422)
+            ->dump()
+            // look for original embedded form
+            ->assertContains('<textarea id="blog_post_form_comments_0_content"')
+            // look for new embedded form
+            ->assertContains('<textarea id="blog_post_form_comments_1_content"')
+            // changed text is still present
             ->assertContains('changed description by user</textarea>')
+            // check that validation happened and stuck
+            ->assertContains('This value is too short. It should have 100 characters or more.')
+            ->use(function(Crawler $crawler) {
+                $div = $crawler->filter('[data-controller="live"]');
+                $liveData = json_decode($div->attr('data-live-data-value'), true);
+                // make sure the 2nd collection type was initialized, that it didn't
+                // just "keep" the empty array that we set it to in the component
+                $this->assertEquals(
+                    [
+                        ['content' => ''],
+                        ['content' => ''],
+                    ],
+                    $liveData['blog_post_form']['comments']
+                );
+            })
         ;
     }
 }