Object
Overview
A nested set of fields for use with InputType.Object
fields. This allows you to group related form fields together and treat them as a single field.
In order to use an object field, add children
and type: InputType.Object
to your FieldConfig
.
children: { fields: FieldConfig[] },
type: InputType.Object
Interface
interface FieldConfig {
key: string;
type: InputType.Object;
children: { fields: FieldConfig[] };
label?: string;
isDisabled?: boolean;
isRequired?: boolean;
defaultValue?: any;
}
key
: A unique identifier for the field.type
: The type of input to use for the field, as specified by theInputType
enumeration.``
children
: A nested set of fields for use withInputType.Object
fields.label
: (optional) The label to display for the field.isDisabled
: (optional) A boolean value indicating whether the field should be disabled.isRequired
: (optional) A boolean value indicating whether the field is required.defaultValue
: (optional) The default value for the field.
Example
Here is an example of how the children
property can be used in an FieldConfig
object:
const validationForm: FormConfig = {
fields: [
{
key: "value",
label: "Value",
type: InputType.Number,
},
{
key: "message",
label: "Message",
type: InputType.Text,
},
],
};
export const validationsFormConfig: FormConfig = {
fields: [
{
key: "minLength",
label: "Min Length Validation",
type: InputType.Object,
children: validationForm,
},
{
key: "maxLength",
label: "Max Length",
type: InputType.Object,
children: validationForm,
},
],
};
In this example, the validationForm
object represents a group of fields that are used to configure a minimum length validation. This group of fields is then reused for the minLength
and maxLength
fields, which are both of InputType.Object
type.
Example Output (form submission)
{
minLength: {
value: 3,
message: 'Minimum 3 letters',
},
maxLength: {
value: 50,
message: 'Maximum 50 letters',
}
}
Last updated
Was this helpful?