Issue with test submitForm with LiveCollectionType

[yalit]

Hi,

I'm struggling to use the submitForm helper with a form containing a LiveCollectionType.

This is the setup.

EventCreationTyp is the following:

class EventCreationType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ... adding other fields
            ->add('participants', LiveCollectionType::class, [
                'allow_add' => true,
                'allow_delete' => true,
                'by_reference' => false,
                'entry_type' => EventParticipantType::class, // => only a FormType with 2 fields : name and email text field and both should be not null and not blank
            ])
        ;
    }
...
}

So in my test, I want to submit the following:

  $component = $this->createLiveComponent(EventForm::class);
  
  $component->submitForm(['event_creation' => [
     ... other fields
      'participants' => [
          [
              'name' => "participant_1",
              'email' => "participant_1@email.com"
          ],
           [
              'email' => "participant_2@email.com",
              'name' => "participant_2"
          ],
      ]
  ]], 'save');

And my issue is that I get a form validation error for the participants saying that for the 1st item in the participants, the name should not be empty and for the second the email should be not null...

When I debug and look what is existing as $formValues at the save time in my LiveComponent I get the following:

 [
 ... other fields
  "participants" => array:2 [
    0 => array:1 [
      "email" => "participant_1@email.com"
    ]
    1 => array:1 [
      "name" => "participant_2"
    ]
  ]
]

this debug is done at the start of the save function in my LiveComponent

#[AsLiveComponent]
final class EventForm extends AbstractController
{
    use DefaultActionTrait;
    use ComponentWithFormTrait;
    use LiveCollectionTrait;

    #[LiveProp]
    public ?EventCreation $formData = null;

    /**
     * @return FormInterface<EventCreation>
     */
    protected function instantiateForm(): FormInterface
    {
        return $this->createForm(EventCreationType::class, $this->formData ?? new EventCreation());
    }

    #[LiveAction]
    public function save(MessageBusInterface $bus): \Symfony\Component\HttpFoundation\RedirectResponse
    {
        dd($this->formValues);
        
        // Submit the form! If validation fails, an exception is thrown
        // and the component is automatically re-rendered with the errors
        $this->submitForm();

      ... treatment of the information
    }
}

in each of the Collection Item, only the last key=>value has been kept... I've tried to debug but can't see where these values are trimmed down. Am I doing something off?

[yalit]

Error reproduced here

[smnandre]

If we put InteractWithLiveComponentTrait aside (where there may be something to fix)... does your component work ?

In your reproducer I notice you're using Collection as type hint for "participants", and reset formData everytime the form is instanciated

[yalit]

Hi,

Yes it does work, in my application I process and store the data and everything is properly stored in dB if data is correct.

When the data is not, the form is properly displayed with all the submitted and the error.

[smnandre]

I think here you cannot submit directly with collection items, but need to first make the same call that livecollection make, in order to create the fields in the form.

$component->call('addCollectionItem', ['name' => 'event_creation']); 

[yalit]

Thanks a lot, it indeed solves the problem, just the way to call it is like this:

$component->call('addCollectionItem', ['name' => 'participants']); 

where participants is the name of the field in the form

[yalit]

Is there a documentation update that could be done to help on this?

[smnandre]

Maybe in the LiveCollection part ? Or a code example after the big test one at the very end of the page ?

This could be a good idea, yeah 👍

[yalit]

@smnandre I'll make a proposal pull request

[yalit]

@smnandre pull request created here

[smnandre]

Thank you very much! 🤝

i'll have a look later tonight