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
`<Form>` is a headless component that creates a `<form>` to edit a record, and renders its children. Use it to build a custom form layout, or to use another UI kit than Material UI.
10
6
11
7
`<Form>` reads the `record` from the `RecordContext`, uses it to initialize the defaultValues of a react-hook-form via `useForm`, turns the `validate` function info a react-hook-form compatible form validator, notifies the user when the input validation fails, and creates a form context via `<FormProvider>`.
Use `<Form>` to build completely custom form layouts. Don't forget to include a submit button (or react-admin's [`<SaveButton>`](./SaveButton.md)) to actually save the record.
13
+
Use `<Form>` to build completely custom form layouts. Don't forget to include a submit button to actually save the record.
@@ -66,25 +62,28 @@ Additional props are passed to [the `useForm` hook](https://react-hook-form.com/
66
62
The value of the form `defaultValues` prop is an object, or a function returning an object, specifying default values for the created record. For instance:
**Tip**: You can include properties in the form `defaultValues` that are not listed as input components, like the `created_at` property in the previous example.
86
85
87
-
**Tip**: React-admin also allows to define default values at the input level. See the [Setting default Values](./Forms.md#default-values) section.
86
+
**Tip**: React-admin also allows to define default values at the input level. See the [Setting default Values](../guides/Form.md#default-values) section.
88
87
89
88
## `id`
90
89
@@ -93,17 +92,20 @@ Normally, a submit button only works when placed inside a `<form>` tag. However,
The `<form novalidate>` attribute prevents the browser from validating the form. This is useful if you don't want to use the browser's default validation, or if you want to customize the error messages. To set this attribute on the underlying `<form>` tag, set the `noValidate` prop to `true`.
113
115
114
116
```jsx
117
+
import { CreateBase, Form } from'ra-core';
118
+
115
119
constPostCreate= () => (
116
-
<Create>
120
+
<CreateBase>
117
121
<Form noValidate>
118
122
...
119
123
</Form>
120
-
</Create>
124
+
</CreateBase>
121
125
);
122
126
```
123
127
@@ -126,17 +130,19 @@ const PostCreate = () => (
126
130
By default, the `<Form>` calls the `save` callback passed to it by the edit or create controller, via the `SaveContext`. You can override this behavior by setting a callback as the `onSubmit` prop manually.
@@ -160,12 +166,14 @@ But for your own input components based on react-hook-form, this is not the defa
160
166
If you prefer to omit the keys for empty values, set the `sanitizeEmptyValues` prop to `true`. This will sanitize the form data before passing it to the `dataProvider`, i.e. remove empty strings from the form state, unless the record actually had a value for that field before edition.
161
167
162
168
```jsx
169
+
import { CreateBase, Form } from'ra-core';
170
+
163
171
constPostCreate= () => (
164
-
<Create>
172
+
<CreateBase>
165
173
<Form sanitizeEmptyValues>
166
174
...
167
175
</Form>
168
-
</Create>
176
+
</CreateBase>
169
177
);
170
178
```
171
179
@@ -178,17 +186,18 @@ For the previous example, the data sent to the `dataProvider` will be:
178
186
}
179
187
```
180
188
181
-
**Note:**Setting the`sanitizeEmptyValues`prop to `true` will also have a (minor) impact on react-admin inputs (like `<TextInput>`, `<NumberInput>`, etc.): empty values (i.e. values equal to `null`) will be removed from the form state on submit, unless the record actually had a value for that field.
189
+
**Note**Even with`sanitizeEmptyValues`set to `true`, deeply nested fields won't be set to `null` nor removed. If you need to sanitize those fields, use [the `transform` prop](./EditBase.md#transform) of `<EditBase>` or `<CreateBase>` components.
182
190
183
-
**Note** Even with `sanitizeEmptyValues` set to `true`, deeply nested fields won't be set to `null` nor removed. If you need to sanitize those fields, use [the `transform` prop](./Edit.md#transform) of `<Edit>` or `<Create>` components.
184
-
185
-
If you need a more fine-grained control over the sanitization, you can use [the `transform` prop](./Edit.md#transform) of `<Edit>` or `<Create>` components, or [the `parse` prop](./Inputs.md#parse) of individual inputs.
191
+
If you need a more fine-grained control over the sanitization, you can use [the `transform` prop](./EditBase.md#transform) of `<EditBase>` or `<CreateBase>` components, or [the `parse` prop](../inputs/useInput.md#parse) of individual inputs.
186
192
187
193
## `validate`
188
194
189
195
The value of the form `validate` prop must be a function taking the record as input, and returning an object with error messages indexed by field. For instance:
constformState=useFormState(); // ❌ should deconstruct the formState
253
264
```
254
265
255
-
## AutoSave
256
-
257
-
In forms where users may spend a lot of time, it's a good idea to save the form automatically after a few seconds of inactivity. You can auto save the form content by using [the `<AutoSave>` component](./AutoSave.md).
Note that you **must** set the `<Form resetOptions>` prop to `{ keepDirtyValues: true }`. If you forget that prop, any change entered by the end user after the autosave but before its acknowledgement by the server will be lost.
291
-
292
-
If you're using it in an `<Edit>` page, you must also use a `pessimistic` or `optimistic`[`mutationMode`](https://marmelab.com/react-admin/Edit.html#mutationmode) - `<AutoSave>` doesn't work with the default `mutationMode="undoable"`.
293
-
294
-
Check [the `<AutoSave>` component](./AutoSave.md) documentation for more details.
295
-
296
-
An alternative to the `<AutoSave>` component is to use [the `<AutoPersistInStore>` component](./AutoPersistInStore.md). This component saves the form values in the local storage of the browser. This way, if the user navigates away without saving, the form values are reapplied when the user comes back to the page. This is useful for long forms where users may spend a lot of time.
**Tip:** If you'd like to avoid creating an intermediate component like `<CityInput>`, or are using an `<ArrayInput>`, you can use the [`<FormDataConsumer>`](./Inputs.md#linking-two-inputs) component as an alternative.
312
+
**Tip:** If you'd like to avoid creating an intermediate component like `<CityInput>`, or are using an `<ArrayInput>`, you can use the [`<FormDataConsumer>`](../inputs/Inputs.md#linking-two-inputs) component as an alternative.
0 commit comments