|
1 | | -Coming soon. 😜 |
| 1 | +## Form Composition |
| 2 | + |
| 3 | +The dynamic form component `<dynamic-form />` is pretty straight-forward. 😁 |
| 4 | + |
| 5 | +You will only need to add it to your template like this: |
| 6 | + |
| 7 | +```html |
| 8 | +<template> |
| 9 | + <dynamic-form :form="form" /> |
| 10 | +</template> |
| 11 | +``` |
| 12 | + |
| 13 | +And pass trough the `DynamicForm` object as a prop: |
| 14 | + |
| 15 | +```typescript |
| 16 | +setup() { |
| 17 | + const form = ref({ |
| 18 | + id: 'my-awesome-form, |
| 19 | + fields: { |
| 20 | + name: TextField({ |
| 21 | + label: 'Name', |
| 22 | + }), |
| 23 | + email: EmailField({ |
| 24 | + label: 'Email', |
| 25 | + }), |
| 26 | + password: PasswordField({ |
| 27 | + label: 'Password', |
| 28 | + autocomplete: 'current-password', |
| 29 | + validations: [passwordValidator], |
| 30 | + }), |
| 31 | + } |
| 32 | + }); |
| 33 | + |
| 34 | + return { form } |
| 35 | +} |
| 36 | +``` |
| 37 | + |
| 38 | +If you're using [VueI18n](https://kazupon.github.io/vue-i18n/) or any property of your form fields for example: `customClass`, `options` needs to be reactive you can also declare the form as a `computed` property like this: |
| 39 | + |
| 40 | +```typescript |
| 41 | +import { useI18n } from "./i18nPlugin"; |
| 42 | + |
| 43 | +setup() { |
| 44 | + const i18n = useI18n(); |
| 45 | + let consoleOptions = ref([]); |
| 46 | + |
| 47 | + const form = computed(() => ({ |
| 48 | + id: 'my-awesome-form, |
| 49 | + fields: { |
| 50 | + name: TextField({ |
| 51 | + label: i18n.t('name'), |
| 52 | + }), |
| 53 | + email: EmailField({ |
| 54 | + label: i18n.t('email'), |
| 55 | + }), |
| 56 | + console: SelectField({ |
| 57 | + label: 'Console (Async Options)', |
| 58 | + optionValue: 'console', |
| 59 | + options: consoleOptions.value, |
| 60 | + }), |
| 61 | + } |
| 62 | + })); |
| 63 | + |
| 64 | + onMounted(async () => { |
| 65 | + try { |
| 66 | + consoleOptions.value = await yourApiCall(); |
| 67 | + } catch (e) { |
| 68 | + console.error(e); |
| 69 | + } |
| 70 | + }); |
| 71 | + |
| 72 | + return { form } |
| 73 | +} |
| 74 | +``` |
| 75 | + |
| 76 | +## Submitting the form |
| 77 | + |
| 78 | +This is the recommended way to use the `dynamic-forms` with all the features. (Built-in Validations included). |
| 79 | + |
| 80 | +```html |
| 81 | +<template> |
| 82 | + <div> |
| 83 | + <dynamic-form |
| 84 | + :form="form" |
| 85 | + @submitted="formSubmitted" |
| 86 | + @error="processErrrors" |
| 87 | + /> |
| 88 | + <button submit="true" :form="form.id"> |
| 89 | + Submit |
| 90 | + </button> |
| 91 | + </div> |
| 92 | +</template> |
| 93 | +``` |
| 94 | + |
| 95 | +## Values Changed |
| 96 | + |
| 97 | +The library provides you the possibility of submitting the form (check the previous section) or listen to the values change directly, using the `change` event. |
| 98 | + |
| 99 | +```html |
| 100 | +<template> |
| 101 | + <dynamic-form :form="form" @change="updateValues" /> |
| 102 | +</template> |
| 103 | +``` |
| 104 | + |
| 105 | +```js |
| 106 | +methods: { |
| 107 | + updateValues(values) { |
| 108 | + // Apply your own validation |
| 109 | + // Do what you need with the data |
| 110 | + } |
| 111 | +} |
| 112 | +``` |
| 113 | + |
| 114 | +::: warning |
| 115 | +By using `change` event, you are giving up to the built-in validation, which is only available if the form is submitted. You will need to apply the validation yourself or use the `error` event. |
| 116 | +::: |
0 commit comments