Question regarding: Classically implemented embedded collection of forms inside a Live Component with ComponentWithFormTrait results in javascript console error "Invalid model name" after dynamically adding entries via javascript in the frontend.

[gewait]

I'm sorry if this is a silly question or this is not the right place to ask it...

The situation:

I have a live component using the ComponentWithFormTrait.

In the entity of the form i have a OneToMany relation.

In the formtype of the form i have a normal CollectionType field with 'allow_add' => true and 'allow_delete' => true.

The handling of the CollectionType field is implemented "classically" like described in https://symfony.com/doc/current/form/form_collections.html.

In the frontend the user can click a add button and some javascript code uses the vars.prototype information to add new entries to the collection.

---

The problem:

When i add a new entry in the frontend and i enter something in the fields of the new entry and trigger a focus change,

then the javascript code of the livecomponent throws an error to the browser console:

Uncaught Error: Invalid model name "akte_tab_kunde.kunde.0.kontakte.kontakte.0.kontaktart"

So, the Livecomponent part seems to have a problem with fields that are added by custom javascript and that it doesn't know about.

The error is thrown here:

set(model, value, reRender = false, debounce = false) {
        const promise = this.nextRequestPromise;
        const modelName = normalizeModelName(model);
        if (!this.valueStore.has(modelName)) {
            throw new Error(`Invalid model name "${model}".`);          <---- Source of Error
        }
        const isChanged = this.valueStore.set(modelName, value);
        this.hooks.triggerHook('model:set', model, value, this);
        this.unsyncedInputsTracker.markModelAsSynced(modelName);
        if (reRender && isChanged) {
            this.debouncedStartRequest(debounce);
        }
        return promise;
    }

---

The question:

I know that there is a special LiveCollectionType that can be used here.

I would like to know if using a normal CollectionType here is not supported or if i am just missing something to make it work?

Perhaps there is a way to update the model after adding a entry?

Or a way to just exclude the CollectionType field form being handled/validated by the Live Component?

[smnandre]

So, the Livecomponent part seems to have a problem with fields that are added by custom javascript and that it doesn't know about.

Yep, the LiveComponent cannot be updated like this. The internal problems are explained here: https://symfony.com/bundles/ux-live-component/current/index.html#using-actions-to-change-your-form-collectiontype

And the solution suggested is indeed to use LiveCollectionType

[gewait]

Ok, thank you very much for taking the time to answer my question :-)