1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| import { inject } from 'vue';
|
| import {
| FieldContextKey,
| useFieldError,
| useIsFieldDirty,
| useIsFieldTouched,
| useIsFieldValid,
| } from 'vee-validate';
|
| import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
|
| export function useFormField() {
| const fieldContext = inject(FieldContextKey);
| const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
|
| if (!fieldContext)
| throw new Error('useFormField should be used within <FormField>');
|
| const { name } = fieldContext;
| const id = fieldItemContext;
|
| const fieldState = {
| error: useFieldError(name),
| isDirty: useIsFieldDirty(name),
| isTouched: useIsFieldTouched(name),
| valid: useIsFieldValid(name),
| };
|
| return {
| formDescriptionId: `${id}-form-item-description`,
| formItemId: `${id}-form-item`,
| formMessageId: `${id}-form-item-message`,
| id,
| name,
| ...fieldState,
| };
| }
|
|
