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
@@ -5,12 +5,23 @@ import CodeExample from '@docs/code-example';
5
5
6
6
# FormTemplate
7
7
8
-
FormTemplate component allows you to fully customize the form layout. FormTemplate receives only two props:
8
+
[FormTemplate component](/components/renderer#formtemplate) allows you to fully customize the form layout. FormTemplate receives only two props from renderer: `formFields` and `schema`.
9
9
10
-
|Prop|Description|
11
-
|----|-----------|
12
-
|formFields|Fields of the form.|
13
-
|schema|Schema from renderer. You can use it to extract a form title, description or whatever you need.|
10
+
## Props
11
+
12
+
### formFields
13
+
14
+
*node*
15
+
16
+
Fields of the form.
17
+
18
+
### schema
19
+
20
+
*object*
21
+
22
+
[Schema](/components/renderer#schema) from renderer. You can use it to extract a form title, description or whatever you need.
With using `useFormApi` hook you can get access to all form information and functions you need. For example, you can use it to display form errors wherever you want to.
32
43
33
-
## Customize form buttons
34
-
35
-
You can customize form buttons in your [FormTemplate](/components/renderer#formtemplate) component
To display all form errors, you will need to add a component to your FormTemplate. Following example shows how to list all errors at the top of a form.
FormTemplates of the provided DDF mappers offers additional customization via using props.
@@ -55,20 +54,114 @@ import { FormTemplate } from '@data-driven-forms/pf4-component-mapper'
55
54
/>
56
55
```
57
56
58
-
|Prop|Type|Description|Default|
59
-
|----|:--:|----------:|------:|
60
-
|buttonClassName|string|Class which will be given to the buttons wrapper.|{ }|
61
-
|buttonOrder|array of strings|You can specify the order of the form buttons.|`[ 'submit', 'reset', 'cancel' ]`|
62
-
|buttonGroupProps|object|Props passed to an element wrapping all buttons.|undefined|
63
-
|buttonsProps|object|Props passed to buttons. Please follow this structure: `{ submit: submitButtonProps, cancel: cancelButtonProps, reset: resetButtonProps }`|undefined|
64
-
|cancelLabel|node|Label for cancel button.|'Cancel'|
65
-
|canReset|bool|Show/hide reset button.|false|
66
-
|disableSubmit|array of strings|You can specify a form attributes (see [here](https://final-form.org/docs/final-form/types/FormState)) which will make the submit button disabled. |[]|
67
-
|formWrapperProps|object|Props passed to a form wrapper.|undefined|
68
-
|headerProps|object|Props passed to a header element.|undefined|
69
-
|resetLabel|node|Label for reset button.|'Reset'|
70
-
|showFormControls|bool|You can disable showing form buttons. Use it with wizard component which has its own buttons.|true|
71
-
|submitLabel|node|Label for submit button.|'Submit'|
72
-
|titleProps|object|Props passed to a title element.|undefined|
57
+
### Props
58
+
59
+
#### buttonClassName
60
+
61
+
*string*
62
+
63
+
Class which will be given to the buttons wrapper.
64
+
65
+
---
66
+
67
+
#### buttonOrder
68
+
69
+
*string[]*
70
+
71
+
You can specify the order of the form buttons.
72
+
73
+
*Example*
74
+
75
+
`[ 'submit', 'reset', 'cancel' ]`
76
+
77
+
---
78
+
#### buttonGroupProps
79
+
80
+
*object*
81
+
82
+
Props passed to an element wrapping all buttons.
83
+
84
+
---
85
+
#### buttonsProps
86
+
87
+
*object*
88
+
89
+
Props passed to buttons. Please follow this structure: `{ submit: submitButtonProps, cancel: cancelButtonProps, reset: resetButtonProps }`.
90
+
91
+
---
92
+
#### cancelLabel
93
+
94
+
*node = 'Cancel'*
95
+
96
+
Label for cancel button.
97
+
98
+
---
99
+
#### canReset
100
+
101
+
*boolean*
102
+
103
+
Shows/hides the reset button.
104
+
105
+
---
106
+
#### disableSubmit
107
+
108
+
*string[]*
109
+
110
+
You can specify a form attributes (see [here](https://final-form.org/docs/final-form/types/FormState)) which will make the submit button disabled when true.
111
+
112
+
---
113
+
#### formWrapperProps
114
+
115
+
*object*
116
+
117
+
Props passed to a form wrapper.
118
+
119
+
---
120
+
121
+
#### headerProps
122
+
123
+
*object*
124
+
125
+
Props passed to a header element.
126
+
127
+
---
128
+
129
+
#### resetLabel
130
+
131
+
*node = 'Reset'*
132
+
133
+
Label for reset button.
134
+
135
+
---
136
+
137
+
#### showFormControls
138
+
139
+
*boolean = true*
140
+
141
+
You can disable showing form buttons. Use it with wizard component which has its own buttons.
142
+
143
+
---
144
+
145
+
#### submitLabel
146
+
147
+
*node = 'Submit'*
148
+
149
+
Label for submit button.
150
+
151
+
---
152
+
153
+
#### titleProps
154
+
155
+
*object*
156
+
157
+
Props passed to a title element.
158
+
159
+
---
160
+
161
+
## Examples
162
+
163
+
**[Custom form buttons](/examples/custom-form-buttons)**
To display all form errors, you will need to add a component to your [FormTemplate](/components/form-template). Following example shows how to list all errors at the top of a form.
0 commit comments