Skip to content
This repository was archived by the owner on Jun 27, 2023. It is now read-only.

Commit 319d7f4

Browse files
committed
docs: added reset form documentation
1 parent f6205a9 commit 319d7f4

File tree

2 files changed

+80
-0
lines changed

2 files changed

+80
-0
lines changed

docs/.vitepress/config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@ const config = {
8888
text: 'Slots',
8989
link: '/guide/advanced/slots',
9090
},
91+
{
92+
text: 'Reset Form',
93+
link: '/guide/advanced/reset-form',
94+
},
9195
],
9296
},
9397
],

docs/guide/advanced/reset-form.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
By default, form controls are resetted after `submit` event.
2+
3+
It's possible to deactivate this funcionality by setting `resetAfterSubmit` to `false` on the `Form Options`.
4+
5+
You can find and example [here](https://vue-dynamic-forms-demos.alvarosaburido.dev/reset-after-submit).
6+
7+
```typescript
8+
export default {
9+
data() {
10+
return {
11+
form: {
12+
id: 'my-awesome-form',
13+
fields: {
14+
name: TextField({
15+
label: 'Name',
16+
}),
17+
email: EmailField({
18+
label: 'Email',
19+
}),
20+
},
21+
},
22+
options: {
23+
resetAfterSubmit: false,
24+
},
25+
}
26+
},
27+
}
28+
```
29+
30+
# Manual Reset
31+
32+
It's possible to reset the form controls and validation manually by accesing the `form` reference and calling the methods directly.
33+
34+
```html
35+
<DynamicForm ref="formRef" :form="form" />
36+
```
37+
38+
You can see the example [here](https://vue-dynamic-forms-demos.alvarosaburido.dev/reset-form).
39+
40+
## Options API
41+
42+
You can access the dom element ref above by using template refs `this.$ref`
43+
44+
```typescript
45+
46+
methods: {
47+
resetForm() {
48+
this.$refs.formRef.resetForm
49+
}
50+
}
51+
52+
```
53+
54+
## Composition API
55+
56+
You can access the dom element ref above by using template refs `const formRef = ref(null)`.
57+
58+
::: warning
59+
Remember to add the ref to the return statement on the `setup` function so it's available on the template.
60+
:::
61+
62+
```typescript
63+
64+
setup() {
65+
const formRef = ref(null);
66+
67+
function resetForm() {
68+
formRef.value.resetForm()
69+
}
70+
71+
return {
72+
formRef
73+
}
74+
}
75+
76+
```

0 commit comments

Comments
 (0)