Symfony UX - LiveComponent problem with html5 date

Question

I implemented LiveComponent on my form containing a date and other fields.

I use a DateType field compatible with html5. When I use my form and type a date that starts with 0 (eg: 05/10/2024), I have the following error: "Expected argument of type "DateTimeImmutable", "null" given at property path "operationDate".

When the date is greater than the 9th of the month (eg: 15/10/2024), I have no problem.

The entity

Here my form

<?php

namespace App\Form\Transaction;

use App\Entity\Transaction\BalanceTransaction;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class BalanceTransactionType extends AbstractType
{
    #[\Override]
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('operationDate', DateType::class, [
                'widget' => 'single_text',
                'label' => 'Operation date',
                'html5' => true,
                'input' => 'datetime_immutable',
                'required' => true,
            ])
            ->add('label', TextType::class, [
                'label' => 'Label',
                'required' => false,
            ])
        ;
    }

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

Here my component

<?php

namespace App\Twig\Components\Transaction;

use App\Entity\Transaction\BalanceTransaction;
use App\Form\Transaction\BalanceTransactionType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\FormInterface;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\ComponentWithFormTrait;
use Symfony\UX\LiveComponent\DefaultActionTrait;
use Symfony\UX\LiveComponent\LiveCollectionTrait;

#[AsLiveComponent()]
class BalanceTransactionForm extends AbstractController
{
    use DefaultActionTrait;
    use LiveCollectionTrait;

    #[LiveProp(fieldName: 'formData')]
    public ?BalanceTransaction $transaction = null;

    #[LiveProp(fieldName: 'bankAccountId')]
    public string $bankAccountId;

    protected function instantiateForm(): FormInterface
    {
        return $this->createForm(
            BalanceTransactionType::class,
            $this->transaction
        );
    }
}

In my example the entity with the value operationDate filled in. When I start changing the first two digits (the first of which starts with 0) (dd/mm/yyyyy format) and the cursor moves to the month, a request (ajax via symfony ux) is triggered and causes the error.

Here is the data that was posted

{"props":{"formData":[],"bankAccountId":"019238f6-fcb2-7c6d-be74-6d001c779421","formName":"balance_transaction","balance_transaction":{"operationDate":"2024-10-10","label":"","_token":"3ad.wmTGi7VbU2Uh3D8--6ezcR1XbpIJ-yYn8zTLxPPb6-g.lAvw54ZqKwxS7H1JmuiDFGpuBso_gRJspH6v9L6Snt-aVvXbgTUUAmWIBw"},"isValidated":false,"validatedFields":[],"@attributes":{"id":"live-3733654337-0"},"@checksum":"XLsH+D2OqDJQKXr/ZLKyZmJvtHtlR6xVfgoy9GGp8gg="},"updated":{"balance_transaction.operationDate":"","validatedFields":["balance_transaction.operationDate"]}}

the new date is send empty

I'm trying to apply a debouncing on this field, but I can't do it. I break the automatic update of LiveComponent for this field.

data-model="debounce(100)|operationDate"

I work on symfony/ux-live-component 2.20 and Symfony 6.4

Wikub
– Wikub

2024-10-12 09:17:04 +00:00
Commented Oct 12, 2024 at 9:17 — Wikub
– Wikub, Commented Oct 12, 2024 at 9:17

Wikub · Accepted Answer · 2024-10-14 13:00:22Z

0

Ok, I found a solution with the "debounce", but I had applied it wrongly because directly on an entity object.

In the twig

{{ form_row(form.operationDate, {'attr': { 'data-model': 'debounce(200)|account_transaction.operationDate' }} ) }}

My mistake was the wrong naming of the data-model. It should point to the object first and then the attribute (and not directly to the attribute).

Also, the value of debounce must be large enough to wait until the input is complete, but also too large for the event to be passed on anyway. In my case, I chose a value of 200 ms, after a few tries.

answered Oct 14, 2024 at 13:00

Wikub

335 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Symfony UX - LiveComponent problem with html5 date

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related