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
Copy file name to clipboardExpand all lines: README.md
+26-8Lines changed: 26 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -191,24 +191,42 @@ With the instance in hand, we can pass it our `<Form />` component:
191
191
constLoginForm= () => (
192
192
<Form
193
193
instance={instance}
194
-
onSubmit={() => {
194
+
onUpdate={(id, value) => {
195
+
// Do stuff
196
+
}}
197
+
onSubmit={hasError=> {
195
198
// Do stuff
196
199
}}
197
200
/>
198
201
);
199
202
```
200
203
201
-
And once filled out, `onSubmit` will get us the form responses:
204
+
And once filled out, `onSubmit` will get us the form responses, and also pass along the state of the form
202
205
203
206
```jsx
204
207
constLoginForm= () => (
205
208
<Form
206
-
hideFormTitle
207
-
submitButtonLabel="Login"
208
209
instance={instance}
209
-
onSubmit={() => {
210
-
console.log(instance.getModel()); // Get form responses
211
-
console.log(instance.serializeModel()); // Serialize form responses
210
+
onUpdate={(id, value) => {
211
+
// Log the change set
212
+
console.log(`FieldId ${id} was changed to ${value}`);
213
+
214
+
// Get the full validation results of the field
215
+
console.log(instance.getValidationResultById(id);
216
+
217
+
// Get just the validation status of the field (i.e. ERROR, OK)
218
+
console.log(instance.getValidationStatusById(id);
219
+
}}
220
+
onSubmit={hasError=> {
221
+
if (hasError) {
222
+
// Get form validation results
223
+
console.log(intance.getValidationResults(id));
224
+
}
225
+
// Get form responses
226
+
console.log(instance.getModel());
227
+
228
+
// Serialize form responses
229
+
console.log(instance.serializeModel());
212
230
}}
213
231
/>
214
232
);
@@ -233,7 +251,7 @@ Form definitions adhere to a strict schema. They must contain at least **one sec
233
251
234
252
> View the full schema in the [FormAPIService](https://github.com/mikechabot/react-json-form-engine/blob/master/src/form/service/form-api-service.js#L27)
235
253
236
-
> In forms with a single section, vertical tabs are not displayed. In sections with a single subsection, horizontal tabs are not displayed.
254
+
> In forms with a single section, vertical tabs are not displayed. In sections with a single subsection, horizontal tabs are not displayed. See the [Layout](https://mikechabot.github.io/react-json-form-engine-storybook/?path=/story/layout--multi-section) demos on storybook.
0 commit comments