Fixing bug where validation was lost on update with a passed-in-form

Author: weaverryan

src/LiveComponent/CHANGELOG.md

@@ -5,12 +5,10 @@
 -   Added `data-live-ignore` attribute. If included in an element, that element
     will not be updated on re-render.
 
--   `ComponentWithFormTrait`: call `$this->initializeFormValues()` from
-    `mount()` if your component has a custom `mount()`.
-
--   `ComponentWithFormTrait` no longer has a `setForm()` method, just call
-    `$this->formView = $form` from `mount()` if you have a custom mount.
-    Hopefully that will not be needed soon.
+-   `ComponentWithFormTrait` no longer has a `setForm()` method. But there
+    is also no need to call it anymore. To pass an already-built form to
+    your component, pass it as a `form` var to `component()`. If you have
+    a custom `mount()`, you no longer need to call `setForm()` or anything else.
 
 -   The Live Component AJAX endpoints now return HTML in all situations
     instead of JSON.

src/LiveComponent/src/ComponentWithFormTrait.php

@@ -17,7 +17,7 @@
 use Symfony\Component\HttpKernel\Exception\UnprocessableEntityHttpException;
 use Symfony\UX\LiveComponent\Attribute\BeforeReRender;
 use Symfony\UX\LiveComponent\Attribute\LiveProp;
-use Symfony\UX\LiveComponent\Util\ArrayUtil;
+use Symfony\UX\LiveComponent\Util\LiveFormUtility;
 use Symfony\UX\TwigComponent\Attribute\PostMount;
 
 /**
@@ -69,9 +69,19 @@ abstract protected function instantiateForm(): FormInterface;
     public function postMount(array $data): array
     {
         // allow the FormView object to be passed into the component() as "form"
-        if (array_key_exists('form', $data)) {
+        if (\array_key_exists('form', $data)) {
             $this->formView = $data['form'];
             unset($data['form']);
+
+            if ($this->formView) {
+                // if a FormView is passed in and it contains any errors, then
+                // we mark that this entire component has been validated so that
+                // all validation errors continue showing on re-render
+                if (LiveFormUtility::doesFormContainAnyErrors($this->formView)) {
+                    $this->isValidated = true;
+                    $this->validatedFields = [];
+                }
+            }
         }
 
         // set the formValues from the initial form view's data
@@ -91,7 +101,7 @@ public function postMount(array $data): array
     public function submitFormOnRender(): void
     {
         if (!$this->getFormInstance()->isSubmitted()) {
-            $this->submitForm(false);
+            $this->submitForm($this->isValidated);
         }
     }
 
@@ -146,7 +156,7 @@ private function submitForm(bool $validateAll = true): void
         // changed the underlying data or structure of the form
         $this->formValues = $this->extractFormValues($this->getForm());
         // remove any validatedFields that do not exist in data anymore
-        $this->validatedFields = ArrayUtil::removePathsNotInData(
+        $this->validatedFields = LiveFormUtility::removePathsNotInData(
             $this->validatedFields ?? [],
             [$form->getName() => $this->formValues],
         );

src/LiveComponent/src/Util/ArrayUtil.php renamed to src/LiveComponent/src/Util/LiveFormUtility.php

@@ -11,7 +11,9 @@
 
 namespace Symfony\UX\LiveComponent\Util;
 
-final class ArrayUtil
+use Symfony\Component\Form\FormView;
+
+final class LiveFormUtility
 {
     /**
      * Removes the "paths" not present in the $data array.
@@ -22,11 +24,11 @@ final class ArrayUtil
      */
     public static function removePathsNotInData(array $paths, array $data): array
     {
-        return array_values(array_filter($paths, static function($path) use ($data) {
+        return array_values(array_filter($paths, static function ($path) use ($data) {
             $parts = explode('.', $path);
-            while (count($parts) > 0) {
+            while (\count($parts) > 0) {
                 $part = $parts[0];
-                if (!array_key_exists($part, $data)) {
+                if (!\array_key_exists($part, $data)) {
                     return false;
                 }
 
@@ -40,4 +42,19 @@ public static function removePathsNotInData(array $paths, array $data): array
             return true;
         }));
     }
+
+    public static function doesFormContainAnyErrors(FormView $formView): bool
+    {
+        if ($formView->vars['errors'] ?? null && \count($formView->vars['errors']) > 0) {
+            return true;
+        }
+
+        foreach ($formView->children as $childView) {
+            if (self::doesFormContainAnyErrors($childView)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
 }

src/LiveComponent/tests/Functional/Form/ComponentWithFormTest.php

@@ -15,7 +15,10 @@
 
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Symfony\Component\DomCrawler\Crawler;
+use Symfony\Component\Form\FormFactoryInterface;
 use Symfony\UX\LiveComponent\LiveComponentHydrator;
+use Symfony\UX\LiveComponent\Tests\Fixture\Component\FormWithCollectionTypeComponent;
+use Symfony\UX\LiveComponent\Tests\Fixture\Form\BlogPostFormType;
 use Symfony\UX\TwigComponent\ComponentFactory;
 use Zenstruck\Browser\Response\HtmlResponse;
 use Zenstruck\Browser\Test\HasBrowser;
@@ -93,7 +96,6 @@ public function testFormValuesRebuildAfterFormChanges(): void
                 'headers' => ['X-CSRF-TOKEN' => $token],
             ])
             ->assertStatus(422)
-            ->dump()
             // the original embedded form should be gone
             ->assertNotContains('<textarea id="blog_post_form_comments_0_content"')
             // the added one should still be present
@@ -109,4 +111,36 @@ public function testFormValuesRebuildAfterFormChanges(): void
             })
         ;
     }
+
+    public function testFormRemembersValidationFromInitialForm(): void
+    {
+        /** @var LiveComponentHydrator $hydrator */
+        $hydrator = self::getContainer()->get('ux.live_component.component_hydrator');
+        /** @var ComponentFactory $factory */
+        $factory = self::getContainer()->get('ux.twig_component.component_factory');
+        /** @var FormFactoryInterface $formFactory */
+        $formFactory = self::getContainer()->get('form.factory');
+
+        $form = $formFactory->create(BlogPostFormType::class);
+        $form->submit(['title' => '', 'content' => '']);
+        /** @var FormWithCollectionTypeComponent $component */
+        $component = $factory->create('form_with_collection_type', [
+            'form' => $form->createView(),
+        ]);
+
+        // component should recognize that it is already submitted
+        $this->assertTrue($component->isValidated);
+
+        $dehydrated = $hydrator->dehydrate($component);
+        $dehydrated['blog_post_form']['content'] = 'changed description';
+        $dehydrated['validatedFields'][] = 'blog_post_form.content';
+
+        $this->browser()
+            ->get('/_components/form_with_collection_type?'.http_build_query($dehydrated))
+            // normal validation happened
+            ->assertContains('The content field is too short')
+            // title is STILL validated as all fields should be validated
+            ->assertContains('The title field should not be blank')
+        ;
+    }
 }

src/LiveComponent/tests/Unit/Util/ArrayUtilTest.php renamed to src/LiveComponent/tests/Unit/Util/LiveFormUtilityTest.php

@@ -12,16 +12,16 @@
 namespace Symfony\UX\LiveComponent\Tests\Unit\Util;
 
 use PHPUnit\Framework\TestCase;
-use Symfony\UX\LiveComponent\Util\ArrayUtil;
+use Symfony\UX\LiveComponent\Util\LiveFormUtility;
 
-final class ArrayUtilTest extends TestCase
+final class LiveFormUtilityTest extends TestCase
 {
     /**
      * @dataProvider getPathsTests
      */
     public function testRemovePathsNotInData(array $inputPaths, array $inputData, array $expectedPaths)
     {
-        $this->assertEquals($expectedPaths, ArrayUtil::removePathsNotInData($inputPaths, $inputData));
+        $this->assertEquals($expectedPaths, LiveFormUtility::removePathsNotInData($inputPaths, $inputData));
     }
 
     public function getPathsTests(): iterable
@@ -49,8 +49,8 @@ public function getPathsTests(): iterable
             [
                 'name' => 'Ryan',
                 'posts' => [
-                    1 => ['title' => '1 index post']
-                ]
+                    1 => ['title' => '1 index post'],
+                ],
             ],
             ['name', 'posts.1.title'],
         ];