Add documentation for more complex custom fields

[dflock]

The current docs show how to create a custom field that contains a single <input> element. I would like to see documentation for creating more complex custom fields. Ideally I'd like to know how to create custom fields of the following types:

• Have more than one input internally - eg a field that collects an international phone number and consists of a country dropdown, a numeric input for area code and another numeric input for phone number.
• Contains no input elements at all - just arbitrary HTML and JS that presents an entirely custom widget to the user.
• A wrapper for a custom arbitrary 3rd party Vue component

These should each map to single properties in the model and be a single logical "field" in the form.

The current docs also only show how to create a custom field within a given form. I'd also like to see am example showing how to create a reusable custom field that can be used in different forms.

[alvarosabu]

Hi @dflock so I just merged a new section on the docs called Exampleswith some oof the use cases you asked:

Have more than one input internally - eg a field that collects an international phone number and consists of a country dropdown, a numeric input for area code and another numeric input for phone number.

There is no need to have more than one input inside of the custom-field, I assume you want to achieve is a UI Layout where the 3 inputs are on the same line, you can achieve the same by adding customClass to each element like this example. For more info here is the doc example

The idea is to avoid unnecessary nested controls inside of the form.

Contains no input elements at all - just arbitrary HTML and JS that presents an entirely custom widget to the user.

I strongly recommend to always use input elements for semantic purpose, but if you still want to go that way, you will need to implement v-model on that component.

A wrapper for a custom arbitrary 3rd party Vue component

Example using third-party here it uses vue-select from @salgabot

[samo9789]

Hi,

I am trying to use an existing 3rd party component called vue-tel-input https://www.npmjs.com/package/vue-tel-input in order to have the phone number validation, could you tell me how to use it with dynamic forms ?

Also, the example for third party plugin usage in your post above

Example using third-party here it uses vue-select from @salgabot

does not work

Thank you for your help

[alvarosabu]

Hi @samo9789, I will need a little bit more info about your env and packages versions, what version of both libs are u using? do you have a reproduction link?

Thanks a lot

[samo9789]

Thank you for your answer, I do not have a reproduction link (localhost only so far)

But I can share some code as we made progress since the initial question

The form is declared as follows

...
firstName: TextField({
            label: 'Votre prenom',
          }),
          lastName: TextField({
            label: 'Votre nom'
          }),
          phoneNumber: CustomField({
            label: 'Numero de telephone',
          }),
          dayOfBirth: SelectField({
...

In the template we have

<dynamic-form :form="form" @submitted="update">
        <template
            v-slot:phoneNumber="{ control, onChange, onFocus, onBlur }"
        >
          <vue-tel-input v-if="control"
                        class="form-control"
                        v-model="phone"
                        :value="control.value"
                        :defaultCountry="control.customStyles"
                        :preferredCountries="['FR', 'BE', 'ES', 'GB', 'US']"
                        :type="control.type"
                        :name="control.name"
                        @change="onChange"
                        @focus="onFocus"
                        @blur="onBlur"
          ></vue-tel-input>
        </template>
      </dynamic-form>
      <button submit="true" :form="form.id">Mettre a jour</button>

This displays the field as expected, is it the right approach ?

Versions :

"@asigloo/vue-dynamic-forms": "^3.18.0",
"vue3-tel-input": "^1.0.4",

[alvarosabu]

Hi there, is a little difficult to help only based on pasted code, unfortunately.

I created an updated template on Stackblitz so feel to fork it and add you use case so I can help you better https://stackblitz.com/edit/vitejs-vite-e5dxci?file=src/App.vue as a reproduction link

Thanks