[LiveComponent] Loading state on specific form fields, documentation incomplete

[kilianklein]

Hi guys,

First of all, thank you so much for the great work on this. I am in love with the LAST stack, it is pretty much the stuff I've dreamt of for so many years. Cannot wait for the future and what the community will make of it.

I just wanted to give my rather small contribution here because I am actively playing with this and using it in personal and professional projects.

Here is my issue: I have had the hardest of time to try and add a loading state on a specific field change when using a "live form" (with the ComponentWithForm trait).

Basically, the documentation has a separate paragraph regarding loading state on model change, and it also mentions the capacity to use the input's name to target a specific field change and not the entire form.

Let me explain the issue with a concrete example, imagine that you have a WorkReport entity as your object and it has (between others) a $project field. The workReport entity is what you place in your WorkReportType returned in your "instantiateForm" method.

The problem I encountered is that the computed name attribute for the input shows "work_report[project]" and the following won't get triggered:

<div data-loading="model(work_report[project])|addClass(opacity-50)">
</div>

The actual target we need to use is not the input's name as written in the attribute, but changing the array notation into an object notation as such: "work_report.project".

<div data-loading="model(work_report.project)|addClass(opacity-50)">
</div>

Which, in cleaner programming could be written this way:

<div data-loading="model({{ form.vars.name }}.{{ form.project.vars.name }}])|addClass(opacity-50)">
</div>

I tried almost everything a few weeks ago (besides the right solution) and only just figured it out last night to finally make my live forms' UX cleaner, so I believe that making a reference to this in either the loading state section, the live form section (or both) would be highly beneficial. (The other solution would be to make the stimulus controller behind the loading states understand the array-like notation).

Hope that potentially helps someone!

Kilian.

[smnandre]

I believe there is a couple of examples or references concerning this "dot notation" about child props in the documentation, but there is always room for suggestions / improvments :)

Were would you add a paragraph about this ? Do you have any suggestion about how to word this ?