# DataPropertyForm



The `DataPropertyForm` component is a dynamic form used for rendering
and editing data properties using a provided data model and property
schema.

Usage [#usage]

Integrate `DataPropertyForm` by providing it with a resolved data
model, a data property schema, and initial data. The component manages
form state internally and supports both read-only and editable modes.

```ts
import { DataPropertyForm } from '@socotra/ec-react-components';
import {
    DataModel,
    FieldConfigRecord,
    PropertyRef,
} from '@socotra/ec-react-schemas';

const MyComponent = ({
    dataModel,
    dataPropertySchema,
    data,
}: {
    dataModel: DataModel;
    dataPropertySchema: FieldConfigRecord;
    data: Record<string, PropertyRef>;
}) => {
    const handleSubmit = (formData: Record<string, PropertyRef>) => {
        console.log('Form submitted:', formData);
        // Handle API call or state update
    };

    return (
        <DataPropertyForm
            dataModel={dataModel}
            dataPropertySchema={dataPropertySchema}
            data={data}
            handleSubmit={handleSubmit}
            submitButtonText='Save Data'
        />
    );
};
```

Props [#props]

| Prop                 | Type                                                                 | Description                                                                                      | Default      |
| -------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------ |
| `dataModel`          | `DataModel`                                                          | The resolved data model object containing data types.                                            | **Required** |
| `dataPropertySchema` | `FieldConfigRecord`                                                  | The schema configuration for the data properties to render.                                      | **Required** |
| `data`               | `Record&lt;string, PropertyRef>`                                     | The initial data to display in the form.                                                         | **Required** |
| `handleSubmit`       | `(data: Record&lt;string, PropertyRef>) => void`                     | Callback triggered on form submission.                                                           | `() => {}`   |
| `isSubmitting`       | `boolean`                                                            | When true, disables the form fields and submit button, indicating a submission is in progress.   | `false`      |
| `disabled`           | `boolean`                                                            | Disables the entire form when true.                                                              | `false`      |
| `hideSubmitButton`   | `boolean`                                                            | Hides the submit button when true.                                                               | `false`      |
| `validateOnSubmit`   | `boolean`                                                            | Runs validation on submit and blocks submission if invalid.                                      | `false`      |
| `submitButtonText`   | `string`                                                             | Custom text for the submit button.                                                               | `'Submit'`   |
| `readonly`           | `boolean`                                                            | Renders the form in read-only mode.                                                              | `false`      |
| `id`                 | `string`                                                             | Unique ID for the form wrapper element.                                                          | `undefined`  |
| `titles`             | `{ formTitle?: string; truthyLabel?: string; falsyLabel?: string; }` | An object to override default labels for parts of the form. See “Labels and Translations” below. | `{}`         |

State Management [#state-management]

`DataPropertyForm` manages its state internally using React’s
`useState` hook. The form data is updated via the `onChange`
callback from the underlying `JsonForms` component. No external form
library is used.

Validation [#validation]

Form validation is handled by [Ajv ](https://ajv.js.org/), a JSON
Schema validator.

* A JSON Schema is dynamically generated from the `dataModel` prop
  using the `dataModelToJSONSchema` utility.
* Custom validation formats and keywords are added to the Ajv instance.
* Validation can be configured to run when the user clicks the submit
  button by setting `validateOnSubmit={true}`.
* Error messages are translated into a user-friendly format using the
  `translateError` utility.

Labels and Translations [#labels-and-translations]

The text for UI labels and validation messages can be customized.

**UI Labels**

Labels for sections and fields can be overridden by passing a `titles`
object prop.

| Key           | Description                      | Default Value |
| ------------- | -------------------------------- | ------------- |
| `formTitle`   | Title for the form               | `''`          |
| `truthyLabel` | Text for a `true` boolean value  | `'Yes'`       |
| `falsyLabel`  | Text for a `false` boolean value | `'No'`        |