Add documentation for more complex custom fields about vue-dynamic-forms HOT 5 CLOSED

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

from vue-dynamic-forms.

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

from vue-dynamic-forms.

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

from vue-dynamic-forms.

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",

from vue-dynamic-forms.

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

from vue-dynamic-forms.