Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

How to display validation errors for embedded relations?

Open
#388 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
30/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start by tracing validation handling from EditGuesser through ArrayInput and SimpleFormIterator, focusing on how errors for configs[].name and configs[].data are mapped to TextInput fields. Reproduce the shown invalid response and confirm that each nested input displays its server validation error instead of only form-level flash messages.

Written by the indexing model from the issue text.

Description

#249 is closed with the words that Hydra documentation could not be used. So, in my case I have this:

        <EditGuesser onSuccess={ onSuccess } {...props}>
            <InputGuesser source="domain"/>
            <ArrayInput source="configs"> // instead of InputGuesser, which doesn't detect as expected
                <SimpleFormIterator>
                    <TextInput label="setting" source="name"/> // instead of InputGuesser
                    <TextInput label="value" source="data"/> // instead of InputGuesser
                </SimpleFormIterator>
            </ArrayInput>
        </EditGuesser>

It renders this way:

image

And all works fine until I try to submit the data that is invalid. Here is the response:

image

The problem is that the errors do not get attached to the inputs. In fact no errors are displayed apart The form is not valid. Please check for errors. and then for some reason Server communication error. And those are displayed just as a flash message. How can I display the validation errors for configs[*].name and configs[*].data fields?

Dominant language
TypeScript
Stars
516
Forks
134
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from api-platform/admin

All issues in api-platform/admin

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.