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 |
---|---|---|---|
|
|
The resolved data model object containing data types. |
Required |
|
|
The schema configuration for the data properties to render. |
Required |
|
|
The initial data to display in the form. |
Required |
|
|
Callback triggered on form submission. |
|
|
|
When true, disables the form fields and submit button, indicating a submission is in progress. |
|
|
|
Disables the entire form when true. |
|
|
|
Hides the submit button when true. |
|
|
|
Runs validation on submit and blocks submission if invalid. |
|
|
|
Custom text for the submit button. |
|
|
|
Renders the form in read-only mode. |
|
|
|
Unique ID for the form wrapper element. |
|
|
|
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 thedataModelToJSONSchema
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 |
---|---|---|
|
Title for the form |
|
|
Text for a |
|
|
Text for a |
|