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
{{ message }}
This repository was archived by the owner on Jan 9, 2022. It is now read-only.
Opinionated Vue composition function for Form Validation.
5
+
Vue composition function for Form Validation.
6
6
7
7
-:milky_way:**Written in TypeScript**
8
8
-:ocean:**Dynamic Form support**
@@ -34,12 +34,11 @@ const {
34
34
35
35
-`formData`
36
36
-**Type** - `object`
37
-
-**Required** - `true`
38
-
-**Description** - The structure of your `formData`.
37
+
-**Description** - The structure of your form data.
39
38
40
-
The `formData` object has a structure that is similar to any other object you would write for `v-model` data binding. The only difference being that together with every value you can provide rules to display validation errors.
39
+
The form data object has a structure that is similar to any other object you would write for `v-model` data binding. The only difference being that together with every value you can provide rules to display validation errors.
41
40
42
-
Let's look at an example how the structure of some `formData` object can be converted to an object with the addition of rules:
41
+
Let's look at an example how the structure of some form data object can be converted to an object with the addition of rules:
43
42
44
43
```ts
45
44
const formData = {
@@ -67,7 +66,7 @@ const formDataWithRules = {
67
66
};
68
67
```
69
68
70
-
The `formData`object can contain arrays and can be deeply nested. At the leaf level, the object should contain Form Fields whose simplified type definition looks like the following:
69
+
The form data object can contain arrays and can be deeply nested. At the leaf level, the object should contain fields whose simplified type definition looks like the following:
71
70
72
71
```ts
73
72
typeField<T> = {
@@ -76,7 +75,7 @@ type Field<T> = {
76
75
};
77
76
```
78
77
79
-
To get better type inference while writing the `useValidation` function, it's recommended to define the structure of your `formData` upfront and pass it as the generic parameter `T`. The type for the example above is pretty straightforward:
78
+
To get better type inference while writing the `useValidation` function, it's recommended to define the structure of your data upfront and pass it as the generic parameter `T`. The type for the example above is pretty straightforward:
-**Description** - `True` during validation after calling `validateFields`.
99
98
-`errors`
100
99
-**Type** - `ComputedRef<string[]>`
101
100
-**Description** - Array of all current validation error messages.
102
101
103
-
`Form` is a reactive object with identical structure as the `formData` input.
102
+
`Form` is a reactive object with identical structure as the form data input.
104
103
Every object with a `$value` property will be converted to an object of the following form:
105
104
106
105
```ts
@@ -124,14 +123,14 @@ type Form = {
124
123
```
125
124
126
125
As you may have noticed, all of the properties are prefixed with the `$` symbol, which is to distinguish them from other properties but also to avoid naming conflicts. Below is a
127
-
description of all the fields an their use case:
126
+
description of all the properties and their use case:
128
127
129
128
-`$uid`
130
129
-**Type** - `number`
131
-
-**Description** - Unique identifier of the Form Field. For dynamic Forms this can be used as the `key` attribute in `v-for`.
130
+
-**Description** - Unique identifier of the field. For dynamic forms this can be used as the `key` attribute in `v-for`.
132
131
-`$value`
133
132
-**Type** - `T`
134
-
-**Description** - The `modelValue` of the Form Field which is meant to be used together with `v-model`.
133
+
-**Description** - The `modelValue` of the field, which is meant to be used together with `v-model`.
135
134
-`$errors`
136
135
-**Type** - `string[]`
137
136
-**Description** - Array of validation error messages.
@@ -140,25 +139,27 @@ description of all the fields an their use case:
140
139
-**Description** - `True` while at least one rule is validating.
141
140
-`$onBlur`
142
141
-**Type** - `function`
143
-
-**Description** - Function which will mark this Form Field as touched. When a Field has been touched it will validate all it's rules after every input. Before it will not do any validation.
142
+
-**Description** - Function which will mark this field as touched. When a field has been touched, it will validate all it's rules after every input. Before it will not do any validation.
144
143
145
144
### `useValidation` exposes the following methods:
146
145
147
146
-`validateFields() -> Promise`
148
-
-**Description** - Validate all Fields.
149
-
-**Returns** - A `Promise` which will reject if there are validation errors, and resolve with the `formData` otherwise.
150
-
-`resetFields() -> void`
151
-
-**Description** - Reset all Fields to their original values.
147
+
-**Description** - Validate all fields.
148
+
-**Returns** - A `Promise` which will reject if there are validation errors, and resolve with the form data otherwise.
149
+
-`resetFields(formData?: object) -> void`
150
+
-**Description** - Reset all fields to their original value, or pass an object to set specific values. Check out the [Sandbox](https://codesandbox.io/s/vue-3-form-validation-demo-7mp4z?file=/src/views/LoginForm.vue) for usage examples.
0 commit comments