Symfony UX - LiveComponent 的 html5 日期问题

Question

我在包含日期和其他字段的表单上实现了 LiveComponent。

我使用与html5兼容的DateType字段。当我使用表单并输入以 0 开头的日期（例如：05/10/2024）时，出现以下错误：“预期参数类型为“DateTimeImmutable”，在属性路径“operationDate”处给出“null”。

当日期大于该月的9号时（例如：15/10/2024），我没有问题。

实体

这是我的表格

<?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,
        ]);
    }
}

这是我的组件

<?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
        );
    }
}

在我的示例中，填充了值 operationDate 的实体。 当我开始更改前两位数字（第一个以 0 开头）（dd/mm/yyyyy 格式）并且光标移动到月份时，会触发请求（通过 symfony ux 的 ajax）并导致错误。

这是发布的数据

{"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"]}}

新日期发送为空

我正在尝试在该字段上应用去抖，但我做不到。我打破了LiveComponent对该字段的自动更新。

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

Answer 1

好吧，我找到了一个带有“去抖”的解决方案，但我错误地应用了它，因为直接在实体对象上。

在树枝上

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

我的错误是数据模型的命名错误。 它应该首先指向对象，然后指向属性（而不是直接指向属性）。

此外，debounce 的值必须足够大以等待输入完成，但也太大而无法传递事件。就我而言，经过几次尝试后，我选择了 200 毫秒的值。