You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1.getting-started/3.your-first-form.md
+50-10Lines changed: 50 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,16 +9,17 @@ navigation:
9
9
10
10
## Introduction
11
11
12
-
Let's start by creating our first FormKit form! We'll learn some of FormKit's key features and how they benefit you. We'll also pick up some nice tips along the way — like how to manage form state without using `v-model`.
12
+
Let's start by creating our first FormKit form! We'll learn some of FormKit's key features and how they benefit you. We'll also pick up some nice tips along the way — like how to manage form state without relying on :FrameworkText{vue="<code>v-model</code>"react="<code>modelValue</code> and <code>onUpdateModelValue</code>"}.
13
13
14
14
::Callout
15
15
---
16
16
type: "info"
17
-
label: "Composition API"
17
+
label: "Prerequisites"
18
18
---
19
-
This guide assumes you are are familiar with the <ahref="https://vuejs.org/guide/introduction.html#api-styles">Vue Composition API</a>.
19
+
This guide assumes you are familiar with your framework’s component model, props, and event handlers.
The first feature of a form that we'll explore is that we have a `@submit` event ready to make our life easier when the time comes to submit our form. The `@submit` event gives us as the first argument all the descendant fields the form gathered from the inputs. There is no need to use numerous `v-model`s to collect the form data. Let's add our `createCharacter()` submit handler:
146
+
The first feature of a form that we'll explore is that we have a ready-made submit handler hook in :FrameworkText{vue="<code>@submit</code>"react="<code>onSubmit</code>"}. This handler receives, as its first argument, all the descendant field values the form gathered from its inputs. There is no need to wire numerous :FrameworkText{vue="<code>v-model</code>s"react="controlled fields"} just to collect the form data. Let's add our `createCharacter()` submit handler:
As a convenience when using `type="form"`, the `form` outputs a submit button automatically. For our case, a "Submit" text does not show the intent of the form correctly. To fix that, we can use the `submit-label` prop, which is a `form`-specific feature, by adding `submit-label="Create Character"` to show the intent of the form:
158
+
As a convenience when using `type="form"`, the `form` outputs a submit button automatically. For our case, a "Submit" text does not show the intent of the form correctly. To fix that, we can use the `submitLabel` / `submit-label` prop, which is a `form`-specific feature:
While the form works right now, we can see that some related inputs are separated (i.e., the form data is a flat structure where all form data are siblings). Suppose our backend needs all attributes inside an `attributes` property. We can use the `group` type to group related inputs together by a common `name`.
159
183
160
-
Just like the `form` type, you can wrap all yours fields inside a `<FormKit type="group" name: "attributes">`. Don't forget to add the name property:
184
+
Just like the `form` type, you can wrap all your fields inside a `<FormKit type="group" name="attributes">`. Don't forget to add the `name` prop:
Sometimes forms need to show or hide fields depending on the value of another input. We can do this by learning 2 new concepts:
240
275
241
-
-[Context object](/essentials/configuration) — We can access an input's value (along with other data) inside our form because all `FormKit` components receive their [context object](https://formkit.com/essentials/configuration)in the `#default`[slot prop](https://vuejs.org/guide/components/slots.html#scoped-slots).
276
+
-[Context object](/essentials/configuration) — We can access an input's value (along with other data) inside our form because all `FormKit` components expose their [context object](https://formkit.com/essentials/configuration)to :FrameworkText{vue="the <code>#default</code> slot prop"react="the render-prop child function"}.
242
277
- The value of a `group` - The value of a [group](/inputs/group) (and `form`) input is an object with the values of its children, keyed by the children's `name`s.
243
278
244
279
::Callout
245
280
---
246
281
type: "info"
247
-
label: "Vue's key property"
282
+
label: "Stable keys"
248
283
---
249
-
When using conditional rendering, note that Vue needs hints to know that a DOM element needs a re-render, instead of trying to reuse it. We can add a unique <code>key</code> property to the element to help Vue.
284
+
When using conditional rendering, it can be helpful to give the toggled subtree a unique <code>key</code> so the framework remounts it instead of trying to reuse stale DOM or state.
250
285
::
251
286
252
-
So, let's grab the context object of the `group` input and extract the `value`: `#default="{ value }"`. We want to add a small easter egg for our users if they decide to change all attributes to 1:
287
+
So, let's grab the context object of the `group` input and extract the `value` from :FrameworkText{vue="<code>#default="{ value }"</code>"react="the render-prop child function"}. We want to add a small easter egg for our users if they decide to change all attributes to 1:
0 commit comments