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
The full signature of the `useField` function looks like this:
98
-
99
-
```ts
100
-
interfaceFieldOptions<TValue=unknown> {
101
-
validateOnValueUpdate?:boolean; // if the field should be validated when the value changes (default is true)
102
-
initialValue?:MaybeRef<TValue>;
103
-
validateOnMount?:boolean; ; // if the field should be validated when the component is mounted
104
-
bails?:boolean; // if the field validation should run all validations
105
-
label?:MaybeRef<string|undefined>; // A friendly name to be used in `generateMessage` config instead of the field name, has no effect with yup rules
106
-
standalone?:boolean; // // Excludes the field from participating in any `Form` or `useForm` contexts, useful for creating inputs that do contribute to the `values`, In other words, the form won't pick up or validate fields marked as standalone
107
-
type?:string; // can be either `checkbox` or `radio` or `file` any other types doesn't have an effect.
108
-
109
-
// Both of these are only used if `type="checkbox"`. They are ignored otherwise
110
-
checkedValue?:MaybeRef<TValue>; // If a checkbox this will be used as the new field value when it is checked.
111
-
uncheckedValue?:MaybeRef<TValue>; // If a single checkbox this will be used as the field value when it is unchecked.
112
-
113
-
keepValueOnUnmount?:boolean; // if the form value should be kept when the field is unmounted, default is `false`
114
-
modelPropName?:string; // the model prop name, default is `modelValue`
115
-
syncVModel?:boolean; // If the model prop should be synced with value changes for `v-model` support, default is `true`
116
-
}
117
-
118
-
interfaceValidationResult {
119
-
errors:string[];
120
-
valid:boolean;
121
-
}
122
-
123
-
interfaceFieldState<TValue=unknown> {
124
-
value:TValue;
125
-
dirty:boolean;
126
-
touched:boolean;
127
-
errors:string[];
128
-
}
129
-
130
-
exportinterfaceFieldMeta<TValue> {
131
-
touched:boolean; // field was blurred or attempted submit
132
-
dirty:boolean; // field value was changed
133
-
valid:boolean; // field doesn't have any errors
134
-
validated:boolean; // field was validated via user input
135
-
pending:boolean; // field is pending validation
136
-
initialValue:TValue|undefined; // initial field value
137
-
}
138
-
139
-
/**
140
-
* validated-only: only mutate the previously validated fields
141
-
* silent: do not mutate any field
142
-
* force: validate all fields and mutate their state
@@ -14,25 +14,6 @@ import DocBadge from '@/components/DocBadge.vue';
14
14
15
15
`useForm` is a custom composition API function that allows you to group fields created by `useField` and aggregates their state. It should be used to create logical forms or custom form components similar to the `<Form/>` component which is just a consumer of `useForm`.
16
16
17
-
The most basic usage is where you have both `useField` and `useForm` at the same setup function:
The `useForm` function has field typing capabilities if you need it, getting type information for your fields and their values can be very powerful when building complex forms.
Alternatively, you can use a [typed schema](/guide/composition-api/typed-schema/) to infer the form types from the validation schema if you are using yup or zod.
49
+
67
50
Whichever approach you prefer, you get full type information for your fields for all the functions exposed by `useForm`, here are a few examples.
68
51
69
52
```ts
@@ -97,114 +80,6 @@ It will error out because `age` is not defined in the `LoginForm` type you defin
97
80
98
81
## API Reference
99
82
100
-
### TypeScript Definition
101
-
102
-
The full signature of the `useForm` function looks like this:
This is deprecated, please use `defineInputBinds` or `defineComponentBinds` instead.
590
+
591
+
</DocTip>
592
+
712
593
This creates a bindable two-way model value for the specified fields, there are a couple of signatures for `useFieldModel`. Must be called in the `setup` function.
713
594
714
595
`useFieldModel` accepts either a single field path or multiple via an array. You can use either root field paths or nested paths like `some.user.path` with dot notation.
@@ -724,7 +605,6 @@ This creates a bindable two-way model value for the specified fields, there are
724
605
725
606
<script setup>
726
607
import { useForm } from 'vee-validate';
727
-
import MyTextInput from '@/components/MyTextInput.vue';
This creates a bindable object for the specified field. The bindable object only works with native HTML input elements, for components use `defineComponentBinds` instead.
626
+
627
+
The `defineInputBinds` must be called in the `setup` function.
628
+
629
+
`defineInputBinds` accepts a single field path, You can use either root field paths or nested paths like `some.user.path` with dot notation.
630
+
631
+
```vue
632
+
<template>
633
+
<input v-bind="email" />
634
+
<span>{{ errors.email }}</span>
635
+
636
+
<input v-bind="password" type="password" />
637
+
<span>{{ errors.password }}</span>
638
+
</template>
639
+
640
+
<script setup>
641
+
import { useForm } from 'vee-validate';
642
+
643
+
const { errors, defineInputBinds } = useForm();
644
+
645
+
const email = defineInputBinds('email');
646
+
const password = defineInputBinds('password');
647
+
</script>
648
+
```
649
+
650
+
<CodeTitlelevel="4">
651
+
652
+
`defineComponentBinds`
653
+
654
+
</CodeTitle>
655
+
656
+
This creates a bindable object for the specified field. The bindable object only works with components, for native HTML input elements use `defineInputBinds` instead.
657
+
658
+
The `defineComponentBinds` must be called in the `setup` function.
659
+
660
+
`defineComponentBinds` accepts a single field path, You can use either root field paths or nested paths like `some.user.path` with dot notation.
661
+
662
+
```vue
663
+
<template>
664
+
<MyTextInput v-bind="email" />
665
+
<span>{{ errors.email }}</span>
666
+
667
+
<MyTextInput v-bind="password" type="password" />
668
+
<span>{{ errors.password }}</span>
669
+
</template>
670
+
671
+
<script setup>
672
+
import { useForm } from 'vee-validate';
673
+
import MyTextInput from '@/components/MyTextInput.vue';
Copy file name to clipboardExpand all lines: docs/src/pages/examples/using-stores.mdx
-6Lines changed: 0 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,10 +19,4 @@ If you want to integrate vee-validate with state management solutions you can do
19
19
20
20
The example integrates a form state into the store by utilizing a setup function when defining a store. This makes vee-validate act as a state provider for the form where the form values become your store state and submit function becomes your store action.
21
21
22
-
<DocTip>
23
-
24
-
Notice the errors are displayed immediately, this is because when using `useFieldModel` vee-validate can no longer detect the field touched state. If you want to control the validation behavior in this case, then you need to implement a custom component with `useField` or `<Field>`.
0 commit comments