Nested form fields do not display errors

[honungsburk]

Environment

• Elixir version (elixir -v): 1.17.3
• Phoenix version (mix deps): 1.7.14
• Phoenix LiveView version (mix deps): 1.0.0-rc.7
• Operating system: macOS
• Browsers tested: Chrome
• Problem persists after removing "assets/node_modules": Yes

Actual Behavior

When using nested forms, validation errors are not displayed correctly. Errors are only shown for top-level fields not nested fields.

Reproduction Steps

The issue can be reproduced in this example repository: phoenix_single_file_nested_form_validation

Expected Behavior

Nested forms should properly display validation errors.

[honungsburk]

If you agree that this is a bug I might be able to set off some time to fix it.

[SteffenDE]

I think it's a bug. I actually came across this recently as well, but didn't have the time to look into it. You can workaround this by using the preferred syntax (for change tracking, it is better to use @form directly) and not use :let={f} when you already have a form struct:

    <.form for={@form} as={:form} phx-submit="validate" class="flex flex-col gap-4 max-w-sm mx-auto">
      <.input field={@form[:field_one]} label="Errors are shown" />
      <.inputs_for :let={nested_form} field={@form[:nested_form]}>
        <.input field={nested_form[:field_two]} label="Errors are not shown" />
      </.inputs_for>
      <.button>Validate</.button>
    </.form>

So something gets broken when we create the form we pass to the slot.

[honungsburk]

@SteffenDE Do you have a trick for supporting multiple levels of nesting? Your trick works for one level of nesting but not deeper.

Non-working example:

    <.form for={@form} as={:form} phx-submit="validate" class="flex flex-col gap-4 max-w-sm mx-auto">
      <.input field={@form[:field_one]} label="Errors are shown" />
      <.inputs_for :let={nested_form} field={@form[:nested_form]}>
        <.input field={nested_form[:field_two]} label="Errors are not shown" />
        <.inputs_for :let={double_nested_form} field={nested_form[:double_nested_form]}>
          <.input field={double_nested_form[:field_three]} label="Errors are not shown" />
        </.inputs_for>
      </.inputs_for>
      <.button>Validate</.button>
    </.form>

[SteffenDE]

I do not, but it’s probably the same underlying reason. I’ll try to investigate!

[SteffenDE]

@honungsburk I just tried to reproduce the double nested case, but it works fine for me? Did you maybe forget to cast_embed the double_nested_form?

https://gist.github.com/SteffenDE/f9a10f527ae1b6f87caff61f5ddfb105

[honungsburk]

@honungsburk I just tried to reproduce the double nested case, but it works fine for me? Did you maybe forget to cast_embed the double_nested_form?

https://gist.github.com/SteffenDE/f9a10f527ae1b6f87caff61f5ddfb105

Yep, I added the cast_embed and now the double nesting works.