Symfony Validation: Error message not showing at associated field - forms

Question

Symfony 5.2.5
Minified code
//Entities
class Article {
/**
* #ORM\Id
* #ORM\GeneratedValue
* #ORM\Column(type="integer")
*/
private $id;
/**
* #ORM\OneToMany(targetEntity=ArticleTranslation::class, mappedBy="article", cascade={"persist"}, orphanRemoval=true)
* #Assert\Valid
*/
private $translations;
}
class ArticleTranslation {
/**
* #ORM\Id
* #ORM\GeneratedValue
* #ORM\Column(type="integer")
*/
private $id;
/**
* #ORM\Column(type="string", length=255)
* #Assert\NotBlank
*/
private $title;
/**
* #ORM\Column(type="text")
* #Assert\NotBlank
*/
private $body;
/**
* #ORM\ManyToOne(targetEntity=Article::class, inversedBy="translations")
* #ORM\JoinColumn(nullable=false)
*/
private $article;
/**
* #ORM\Column(type="string", length=5)
* #Assert\NotBlank
*/
private $locale;
}
//FormTypes
class ArticleType extends AbstractType {
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add(/*other fields*/)
->add('translations', ArticleTranslationType::class, ['label' => false, 'data' => new ArticleTranslation(), 'mapped' => false])
->add('save', SubmitType::class, ['label' => 'Save']);
$builder->get('translations')->addEventListener(FormEvents::POST_SUBMIT, function (FormEvent $event) {
$entity = $event->getForm()->getParent()->getData();
$translation = $event->getData();
$translation->setLocale($this->localeService->getCurrentLocale()); //custom service returns e.g. "en"
$entity->addTranslation($translation);
});
}
}
class ArticleTranslationType extends AbstractType {
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('title', TextType::class)
->add('body', TextareaType::class);
}
}
I have two entities called Article and ArticleTranslation with a OneToMany relationship. When creating an Article I want to add a ArticleTranslation to it (e.g. English) - that way there is atleast 1 translation provided. The Article itself just stores generic data like publish-date, while the translation stores title and the content (called body). The above code works fine my only issue is following:
When the validation for title or body fails, the error message is shown above the formular, instead of right next to the associated field. Every other field correctly has the error message right next to it. I am using the default bootstrap 4 form theme.
How can I move the error message to the correct field? The Symfony profiler returns that data.translations[0].body should not be null (since its a collection it has an index) - I guess I need somehow make that into data.translations.body for it to work?
Temporary fix: When adding the validation inside my ArticleTranslationType & remove the Assert\Valid constraint it works. Still interested in another solution with my provided code - Thanks

Answer 1

What you're looking for is the error_bubbling FormType field option.
error_bubbling
type: boolean default: false unless the form is compound.
If true, any errors for this field will be passed to the parent field or form. For example, if set to true on a normal field, any errors for that field will be attached to the main form, not to the specific field.
Your ArticleTranslationType is compound, therefore error_bubbling defaults to true.
The following should do the trick.
$builder->add(
'translations', ArticleTranslationType::class, array(
'data' => new ArticleTranslation(),
'error_bubbling' => false,
'mapped' => false,
'label' => false
)
);

Answer 2

After playing around I finally got my solution. Since the validation tries to validate the first element in my collection e.g. data.translations[0].body I needed just to provide the correct property path for it to know.
$builder->add(
'translations', ArticleTranslationType::class, array(
'data' => new ArticleTranslation(),
'mapped' => false,
'label' => false,
'property_path' => 'translations[0]' //first element of collection
)
);
This maps the error messages to the corresponding field.