Option to disable `data-model` on a field

[FluffyDiscord]

I have form that renders form type from a third party bundle that contains dummy form inputs for selection that are not registered in their form type.

My form uses data-model="on(change)|*" to "auto-validate" it against Symfony back-end. Every time the dummy input field changes, live component throws an error that data model with that field name does not exist (obviously).

I need to somehow blacklist that input, either using CSS selector, or by adding attribute to it that stops/ignores it.

<form data-model="on(change)|*">
    <input name="dummy"/> <-- need to somehow exclude it from the change event
</form>

[xDeSwa]

<input name="favorite_color" data-live-ignore>

https://symfony.com/bundles/ux-live-component/current/index.html#skipping-updating-certain-elements

[FluffyDiscord]

@xDeSwa thank you, I somehow missed that in docs

[FluffyDiscord]

@xDeSwa just tried it, it does not work

<input type="radio" name="tabs-inquiry" class="hidden" data-live-ignore>

this still triggers that thing and throws an error

Uncaught Error: Invalid model name "tabs-inquiry".
    at Component.set (live_controller.js:2025:19)
    at extended.updateModelFromElementEvent (live_controller.js:3156:24)
    at extended.handleChangeEvent (live_controller.js:3112:14)
    at HTMLDivElement.callback (live_controller.js:2926:58)

[xDeSwa]

This example will help you

<?php

namespace App\Twig\Components\Panel\PollTest;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class Test8 extends AbstractController
{
    use DefaultActionTrait;

    #[LiveProp(writable: true)]
    public string $meal = 'lunch';


}

<input type="radio" name="meal[]" data-model="meal" value="breakfast" data-live-ignore>
<input type="radio" name="meal[]" data-model="meal" value="lunch" data-live-ignore>
<input type="radio" name="meal[]" data-model="meal" value="dinner" data-live-ignore>

[FluffyDiscord]

That's counter productive - I can't add properties with LiveProp attribute for each random input other bundles or javascript packages add to the form.

[smnandre]

I'm not conviced LiveComponent should be responsible for "random input other bundles or javascript packages add to the form" .

If you have ideas to improve things, feel free to share!

[FluffyDiscord]

I'm not conviced LiveComponent should be responsible for "random input other bundles or javascript packages add to the form" .

If you have ideas to improve things, feel free to share!

I agree, and thus, there should be way, to exclude third party inputs.

I will say another use case - there are UI components (for example daisyUI) which are using radio inputs to toggle something, like tabs. This is perfectly valid use case, but if you do that in any live component (great example are forms), you run into error thst was mentioned. Adding dummy live props doesn't make sense.

Existing data-live-ignore could be improved by simply skipping the check, whenever model exists or not (the error message I have sent).

Another way would be some way of excluding them by perhaps using a regexp on the form itself, for example data-live-blacklist=".*tab$"

Edit: I just don't understand why is Live Component trying to update model/property that isn't defined in PHP.

[smnandre]

Could you set up a small reproducer so we can have a look? After a quick check, I don't find the precise process that cause this error.