Form and FormField Documentation

Form Component

Description

The Form component is a wrapper that handles form submission, validation, and state management using the react-hook-form library. It provides context to child components and handles the form's lifecycle, including validation and submission.

Props

• fieldSchema: FormFieldSchema[]
  An array of objects that define the structure and validation rules of form fields.

• formData: any
  Default values for the form fields.

• onError?: (error: any) => void
  (Optional) Callback function invoked on form validation errors.

• onSubmit: (data: FormData) => void
  Callback function that is triggered on successful form submission.

• children: (props: { ... }) => React.ReactNode
  Function that renders child components, providing various form methods and state as props. These include submitcb, watch, setValue, getValues, reset, setError, trigger, and unregister.

• customClass?: string
  (Optional) Custom CSS class for the form element.

Example

<Form
  fieldSchema={fieldSchema}
  formData={defaultValues}
  onSubmit={handleSubmit}
  onError={handleError}
  customClass="custom-form-class"
>
  {({ submitcb, watch, setValue }) => <>{/* Your form fields go here */}</>}
</Form>

FormField Component

Description

The FormField component renders individual form fields based on the configuration provided via fieldConfig. It uses the form context provided by the Form component to handle registration and validation.

Props

• fieldConfig: FormFieldSchema
  Configuration object that defines the field's properties, such as type, validation, and custom handling functions.

• onChange?: (data: any) => void
  (Optional) Callback function triggered when the field value changes.

Example

<FormField fieldConfig={yourFieldConfig} onChange={handleFieldChange} />

FormFieldSchema

Description

Defines the structure, behavior, and validation rules for individual form fields.

Properties

• name: string
  The name of the field, used as a key for form data.

• required: boolean
  Whether the field is required.

• formFieldType: FormFieldType
  The type of form field, e.g., INPUT, SELECT, CHECKBOX, etc.

• label?: string
  (Optional) Label for the form field.

• placeholder?: string
  (Optional) Placeholder text for the field.

• helpText?: string
  (Optional) Help text displayed alongside the field.

• disabled?: boolean
  (Optional) Disables the field if set to true.

• options?: FieldOptionsSchema[]
  (Optional) Array of options for fields like SELECT or RADIO.

• onChange?: (data: any) => void
  (Optional) Custom handler for the field's onChange event.

• customClassNames?: { ... }
  (Optional) Custom CSS classes for different parts of the field.

Example

const fieldSchema: FormFieldSchema = {
  name: "email",
  required: true,
  formFieldType: FormFieldType.INPUT,
  label: "Email",
  placeholder: "Enter your email",
  formFieldPattern: [FormFieldPatternsImpl.EMAIL],
};

Additional Types and Enums

• FormFieldType
  Enum defining various types of form fields (e.g., INPUT, PASSWORD, SELECT, etc.).

• FormFieldSubType
  Enum defining subtypes of fields, like TEXT and EMAIL.

• FieldOptionsSchema
  Structure defining options for fields like SELECT or RADIO. Includes value, label, isDisabled, etc.

• FormFieldPatternsImpl
  Class providing validation patterns and messages for fields (e.g., REQUIRED, EMAIL, URL).