У меня есть небольшой вопрос относительно UX LiveCollectionType: https://symfony.com/bundles/ux-live-comComponent/current/index.html#using-livecollectiontype
Допустим, у меня есть очень простой UX Live Component, который только отображает форму и обрабатывает отправку.
Я добавляю LiveCollectionTrait, инициализирую форму и создаю функцию для отправки формы:
//rest of the code
use ComponentWithFormTrait;
use LiveCollectionTrait;
protected function instantiateForm(): FormInterface
{
return $this->createForm(ParentFormType::class);
}
#[LiveAction]
public function saveIt(): \Symfony\Component\HttpFoundation\RedirectResponse
{
$this->submitForm();
$form = $this->getForm();
/** FormDataEntity $formEntity */
$formEntity = $form->getData();
$this->entityManager->persist($formEntity);
$this->entityManager->flush();
return $this->redirectToRoute('home');
}
Эта форма ParentFormType содержит всего одно поле:
//rest of the code of ParentFormType
$builder
->add('child', LiveCollectionType::class, [
'entry_type' => ChildEmbeddedType::class,
'error_bubbling' => false,
'constraints' => [
new Valid(),
],
])
;
//rest of the code
Скажем, для простоты, ChildEmbeddedType содержит всего одно поле:
//rest of the code of ChildEmbeddedType
->add('name', TextType::class, [
'label' => 'name',
'required' => true,
'constraints' => new Length(
min: 2,
),
]);
//rest of the code of ChildEmbeddedType
Я визуализирую форму внутри шаблона Twig компонента, как и должно:
<div{{ attributes }}>
{{form_start(form) }}
{{form_end(form) }}
<button type = "button" data-action = "live#action" data-live-action-param = "saveIt" formnovalidate>submit</button>
</div>
Альтернативно, если я определяю поле формы явно с ошибкой var, наблюдается то же самое поведение:
<div{{ attributes }}>
{{ form_start(form) }}
{{ form_row(form.name) }}
{{ form_errors(form.name) }}
{{ form_end(form) }}
<button type = "button" data-action = "live#action" data-live-action-param = "saveIt" formnovalidate>submit</button>
</div>
В моем home.html.twig я включаю этот компонент:
<twig:FormComponent />
Я загружаю страницу, добавляю новый тип коллекции, ввожу 1 символ в поле «имя», компонент автоматически перерисовывается, и я получаю аккуратное сообщение проверки прямо под полем формы: «Значение слишком короткое, оно должно быть есть» и т. д. и т. п.
Итак, проверка работает.
Я перезагружаю страницу, добавляю новый тип коллекции, но на этот раз оставляю поле формы пустым.
Я нажимаю «отправить». Компонент повторно визуализируется, и профилировщик показывает мне ошибки проверки. Однако поле формы этого не отражает. Он просто отображает поле формы без ошибок (или каких-либо их указаний).
Когда я перебираю ошибки в Twig:
{% set formErrors = form.vars.errors.form.getErrors(true) %}
{% if formErrors|length %}
{% for error in formErrors %}
{{ error["message"] }}
{% endfor %}
{% endif %}
Я вижу сообщения, например:
This value should not be blank.
Для каждого поля, которое должно иметь значение, но на самом деле его не отображает.
В этом примере с одним полем я могу показать общее сообщение об ошибке: проверьте поле, потому что оно пусто.
Но поскольку встроенная форма более сложна и содержит несколько записей, пользователю может быть сложнее найти поле, которое он забыл.
Есть ли у кого-нибудь из вас идеи, как заставить отдельные поля отображать ошибку при отправке пустого типа LiveCollectionType? :)
Хотя это явно не упоминается, добавление 'empty_data' => '' к каждому из обязательных полей во встроенной форме запускает проверку правильно.
В качестве примера:
->add('fullName', TextType::class, [
'label' => $this->translator->trans('Full name'),
'required' => true,
'constraints' => new Length(
min: 2,
),
'empty_data' => '',
])
Даже если у вас могут быть ограничения проверки родительской формы, сущности, самого поля формы и т. д. и т. п. Добавление пустых_данных кажется единственным работающим вариантом.