Adding x-bind Dynamically through Custom Directive

[mhsiddiqui]

I want to write a custom directive called "register," which I will use to register my input fields in my form. I want to add "x-bind" to that input field from this directive. I want react-hook-form like system to register my input fields, which will add all required attributes and events like OnClick or OnChange in that field. Usage will be like

<input type="text" x-register:form="title">
<input type="number" x-register:form="price">
<input type="checkbox" x-register:form="is_available">

I earlier wrote this

Alpine.directive('register', (el, {value, expression}, {evaluate, effect}) => {

        const binding = `formField(${value}, '${expression}')`;
        effect(() => {
            el.setAttribute('x-bind', binding);
        });
    });

This adds "x-bind" when I see HTML like this.

<input type="text" x-register:form="title" x-bind="formField(form, 'title')">
<input type="number" x-register:form="price" x-bind="formField(form, 'price')">
<input type="checkbox" x-register:form="is_available" x-bind="formField(form, 'is_available')">

But it does not work. I remove "x-register" and add "x-bind" with all data then it works which means there is no issue in my formField bind. My custom bind is below.

Alpine.bind('formField', (form, fieldName) => ({
        value: form.getValue(fieldName).value === undefined ? '' : form.getValue(fieldName).value,
        checked: form.getValue(fieldName).value === undefined ? '' : form.getValue(fieldName).value;
        '@change'(event) {
            let eventData = {type: 'change', field: fieldName}
            if (event.target.type === 'checkbox') {
                form.setValue(fieldName, event.target.checked);
                eventData.value = event.target.checked;
            } else {
                form.setValue(fieldName, event.target.value);
                eventData.value = event.target.value;
            }
            this.$dispatch('field-action', eventData);
        }
    }));

I want to add a specific "x-bind" for each type of input field such as radio, text, checkbox, or number as all will have different behaviors. If there is any better solution, please do suggest.

[SimoTod]

You need to make sure the order is correct and your custom directive is processed before bind.

Alpine.directive(...your code...).before('bind')

Im your code, you don't really need the x-bind attribute (unless it's for you to see it in the html) and you can call Alpine.bind directly in your custom directive.

You also don't need effect.

Look at the combobox component in the ui packages for an example.

[SimoTod]

See https://github.com/alpinejs/alpine/blob/main/packages%2Fui%2Fsrc%2Fcombobox.js