DataPropertyForm

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

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.

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

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<string, PropertyRef>`	The initial data to display in the form.	Required
`handleSubmit`	`(data: Record<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

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

Form validation is handled by Ajv , 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

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'`