This repository was archived by the owner on Jun 27, 2023. It is now read-only.
File tree Expand file tree Collapse file tree 2 files changed +80
-0
lines changed Expand file tree Collapse file tree 2 files changed +80
-0
lines changed Original file line number Diff line number Diff line change @@ -88,6 +88,10 @@ const config = {
88
88
text : 'Slots' ,
89
89
link : '/guide/advanced/slots' ,
90
90
} ,
91
+ {
92
+ text : 'Reset Form' ,
93
+ link : '/guide/advanced/reset-form' ,
94
+ } ,
91
95
] ,
92
96
} ,
93
97
] ,
Original file line number Diff line number Diff line change
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
+ ```
You can’t perform that action at this time.
0 commit comments