feature #254 [Live] Re-extracting form data after submit (weaverryan)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Live] Re-extracting form data after submit

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | yes
| Tickets       | Addresses part of #221
| License       | MIT

This fixes 3 bugs at once:

1) This recalculates `formValues` after submit, in case the submitted data *changes* the form's data or underlying structure (e.g. `CollectionType`)

2) If a field is suddenly missing entirely from a form (hint: think removing an embedded CollectionType form), then previously `validatedFields` did not "forget" that field. This caused edge-case bug when removing an embedded form that was validated, then adding a new form a moment later (which would be empty, but now validated).

3) When passing a `FormView` into your component that was already validated, on the first re-render, the validation would be lost and only modified fields would be validated.

Ping `@Lustmored` and `@norkunas`. This mostly addresses `@norkunas`'s problems with how `getFormValues()` works, but this was also causing trouble for `@Lustmored`, potentially for different reasons. So, this may not solve the problems addressed in #221, but it's certainly related.

Cheers!

Commits
-------

c8b3a28 [Live] Re-extracting form data after submit

Author: weaverryan

src/LiveComponent/CHANGELOG.md

@@ -5,6 +5,11 @@
 -   Added `data-live-ignore` attribute. If included in an element, that element
     will not be updated on re-render.
 
+-   `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/composer.json

@@ -34,6 +34,7 @@
         "doctrine/doctrine-bundle": "^2.0",
         "doctrine/orm": "^2.7",
         "symfony/dependency-injection": "^5.4|^6.0",
+        "symfony/form": "^5.4|^6.0",
         "symfony/framework-bundle": "^5.4|^6.0",
         "symfony/phpunit-bridge": "^6.0",
         "symfony/security-csrf": "^5.4|^6.0",

src/LiveComponent/src/ComponentWithFormTrait.php

@@ -17,6 +17,8 @@
 use Symfony\Component\HttpKernel\Exception\UnprocessableEntityHttpException;
 use Symfony\UX\LiveComponent\Attribute\BeforeReRender;
 use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\Util\LiveFormUtility;
+use Symfony\UX\TwigComponent\Attribute\PostMount;
 
 /**
  * @author Ryan Weaver <[email protected]>
@@ -63,17 +65,29 @@ trait ComponentWithFormTrait
      */
     abstract protected function instantiateForm(): FormInterface;
 
-    /**
-     * Override in your class if you need extra mounted values.
-     *
-     * Call $this->setForm($form) manually in that situation
-     * if you're passing in an initial form.
-     */
-    public function mount(?FormView $form = null)
+    #[PostMount]
+    public function postMount(array $data): array
     {
-        if ($form) {
-            $this->setForm($form);
+        // allow the FormView object to be passed into the component() as "form"
+        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
+        $this->initializeFormValues();
+
+        return $data;
     }
 
     /**
@@ -87,7 +101,7 @@ public function mount(?FormView $form = null)
     public function submitFormOnRender(): void
     {
         if (!$this->getFormInstance()->isSubmitted()) {
-            $this->submitForm(false);
+            $this->submitForm($this->isValidated);
         }
     }
 
@@ -103,18 +117,6 @@ public function getForm(): FormView
         return $this->formView;
     }
 
-    /**
-     * Call this from mount() if your component receives a FormView.
-     *
-     * If your are not passing a FormView into your component, you
-     * don't need to call this directly: the form will be set for
-     * you from your instantiateForm() method.
-     */
-    public function setForm(FormView $form): void
-    {
-        $this->formView = $form;
-    }
-
     public function getFormName(): string
     {
         if (!$this->formName) {
@@ -124,18 +126,19 @@ public function getFormName(): string
         return $this->formName;
     }
 
-    public function getFormValues(): array
+    private function initializeFormValues(): void
     {
-        if (null === $this->formValues) {
-            $this->formValues = $this->extractFormValues($this->getForm());
-        }
-
-        return $this->formValues;
+        $this->formValues = $this->extractFormValues($this->getForm());
     }
 
     private function submitForm(bool $validateAll = true): void
     {
-        $this->getFormInstance()->submit($this->formValues);
+        if (null !== $this->formView) {
+            throw new \LogicException('The submitForm() method is being called, but the FormView has already been built. Are you calling $this->getForm() - which creates the FormView - before submitting the form?');
+        }
+
+        $form = $this->getFormInstance();
+        $form->submit($this->formValues);
 
         if ($validateAll) {
             // mark the entire component as validated
@@ -146,10 +149,19 @@ private function submitForm(bool $validateAll = true): void
             // we only want to validate fields in validatedFields
             // but really, everything is validated at this point, which
             // means we need to clear validation on non-matching fields
-            $this->clearErrorsForNonValidatedFields($this->getFormInstance(), $this->getFormName());
+            $this->clearErrorsForNonValidatedFields($form, $form->getName());
         }
 
-        if (!$this->getFormInstance()->isValid()) {
+        // 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());
+        // remove any validatedFields that do not exist in data anymore
+        $this->validatedFields = LiveFormUtility::removePathsNotInData(
+            $this->validatedFields ?? [],
+            [$form->getName() => $this->formValues],
+        );
+
+        if (!$form->isValid()) {
             throw new UnprocessableEntityHttpException('Form validation failed in component');
         }
     }
@@ -192,7 +204,7 @@ private function getFormInstance(): FormInterface
         return $this->formInstance;
     }
 
-    private function clearErrorsForNonValidatedFields(Form $form, $currentPath = ''): void
+    private function clearErrorsForNonValidatedFields(Form $form, string $currentPath = ''): void
     {
         if (!$currentPath || !\in_array($currentPath, $this->validatedFields, true)) {
             $form->clearErrors();