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 = {
8888 text : 'Slots' ,
8989 link : '/guide/advanced/slots' ,
9090 } ,
91+ {
92+ text : 'Reset Form' ,
93+ link : '/guide/advanced/reset-form' ,
94+ } ,
9195 ] ,
9296 } ,
9397 ] ,
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