[Live Components] Reach a specific LC method when input change?

[Nayte91]

Hello awesome guys,
I may miss a simple trick, but I don't find how can I achieve that?

Context:

I have a LC that render my form (use ComponentWithFormTrait) and I need, for a specific input field, to check in database some info and display it. It's not a validation "pass or block" need, it's just for information purpose. So to achieve I think I would need to reach a fetchInfo() method in my LC when my input is filled?

More on the problem:

My LC display a form through a EventType and an eventDTO (#[LiveProp(fieldName: 'formData')] public EventDTO $event). So the form is displayed and refreshed/validated when an input is filled, that's cool. I would need for a given field ({{ form_row(eventForm.location) }} ) to access a specific method that will call an ORM repo and whatever... To display stuff, when filled. I tried to adapt examples from the doc that reaches property (data-model="on(change)|test"), try to catch it with a setTest() method, ...

But unless I misstyped somewhere, I find no easy way to plug an 'onChange' event of a field to a method in LC. Do you know how to do, or if it's a proper feat need?

As the validation (#[Assert\Length(max: 50)]) works this way, I wonder if I don't miss an existing way to achieve.

For now, I think I can workaround it with a stimulus controller plugged to LC, but it may be more elegant to directly catch it in LC?

[SosthenG]

Hi!

If I understand correctly, you want to make a call to a method of your LC when your input has changed and display something depending on the content?
If so you should be able to do the following:

<div{{ attributes }}>
    {{ form_start(form) }}
    {{ form_row(form.myval, {
        attr: {
            'data-action': 'change->live#action',
            'data-live-action-param': 'something'
        }
    }) }}
    {{ form_end(form) }}
    <span>{{ customText }}</span>
</div>

<?php

namespace App\Twig\Components;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\FormInterface;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveAction;
use Symfony\UX\LiveComponent\ComponentWithFormTrait;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
final class Test extends AbstractController
{
    use DefaultActionTrait;
    use ComponentWithFormTrait;

    public string $customText = '';


    #[LiveAction]
    public function something()
    {
        // make your database call or anything else

        $this->customText = 'Text is : ' . $this->formValues['myval'];
    }

    protected function instantiateForm(): FormInterface
    {
        return $this->createFormBuilder()->add('myval')->getForm();
    }
}

Then everytime the "change" event is triggered, the live action "something" is called which can do anything you want and then re-render the component with the customText changed.

I hope this helps!

[Nayte91]

Thank you very much, works flawlessly!

Even if this is a "Stimulus trick", I feel like this kind of use of data-action should also belong in the Symfony UX Live Components documentation. At the very least a mention that "data-action comes from Stimulus, look at the doc to find out other uses", but I feel like it needs a paragraph about this. I will open an issue on the doc side (unless you think that's a bad idea!)

[SosthenG]

I don't really think this is a trick, this looks like the way to do it with Stimulus and is already documented here with a "resetMax" example.

And there is also a link to the "actions" stimulus documentation:

To call this, trigger the action method on the live Stimulus controller and pass resetMax as a Stimulus action parameter called action:

The documentation looks fine to me but you can always try to improve it if you think it could be clearer!

[Nayte91]

I don't really think this is a trick, this looks like the way to do it with Stimulus and is already documented here with a "resetMax" example.

I was precisely bugging on this part of the documentation for couple of hours, when you get me out of there. As the data-action example is basic, you came with a 'event->controller#method' syntax that I only seen once in a Symfonycasts chapter.

And there is also a link to the "actions" stimulus documentation:

I can see explanations about actions here, and thanks to you I'm glad to finally understand what I'm typing 😂 There's also a mention of "it's possible to do" in the SF Stimulus doc, but nothing as precise as you did; It's still a "advanced use" of the underlying lib (Stimulus) in a Live component, and I actually don't blame myself too much not finding it 😅

To call this, trigger the action method on the live Stimulus controller and pass resetMax as a Stimulus action parameter called action:

The documentation looks fine to me but you can always try to improve it if you think it could be clearer!

So yes, I'm wondering how to improve doc a bit around this paragraph, maybe by making it more explicite and giving 1 or 2 more examples?

If I look form further, I'm currently having trouble with Stimulus connections of LC, and controller's behavior of LC. I feel like LCs are in this very specific zone, where you need to be strong with those 2 tools to make advanced non-basic things. So documentation should reflect this, but at the same time, it's already 50+ pages... So... 🤷‍♂️

Anyway thank you very much!

[Nayte91]

Hello!
Aww gawd I didn't receive notification of your answer, and it seems so good! Thank you very much, I will try ASAP and get you informed, but you totally understood my (non)issue.