Form Component

Purpose

Form Component is a component that wraps a form.

Example

component: form
name: myForm
props:
  initialValue:
    firstName: John
    lastName: Doe
  onSubmit:
    - notification:
        message: "Form submitted successfully!"
        variant: success
  validationSchema:
    firstName:
      required:
        message: First Name is required
      min:
        length: 2
        message: First Name should be more than 2 characters
    phoneNumbers:
      type: array
      min:
        length: 1
        message: At least one phone number is required
      itemSchema:
        type: string
        required:
          message: Phone number is required
    contacts:
      type: array
      min:
        length: 1
        message: At least one contact is required
      itemSchema:
        type: object
        schema:
          name:
            required:
              message: Name is required
          phone:
            required:
              message: Phone is required

children:
  - component: field
    name: firstName
    props:
      label: First Name
      type: text
      placeholder: Enter your first name
  - component: field
    name: lastName
    props:
      label: Last Name
      type: text
      placeholder: Enter your last name

prefix

The prefix property is used to prefix the name of the fields.

component: form
name: myForm
props:
  prefix: user

All the fields inside the form will be prefixed with user.

Props

• initialValue (object): The initial value of the form. Default is {}.
• prefix (string): The prefix to be used for the fields inside the form. Default is ''.
• queries (array): The queries to be used to populate the form. Default is [].
• validationSchema (object): The validation schema to be used for the form. Default is {}.
• onLoad (function): Actions to be performed when the form is loaded. Default is [].
• onSubmit (function): Actions to be performed when the form is submitted. Default is [].
• onCancel (function): Actions to be performed when the form is canceled. Default is [].

initialValue

The initialValue property is used to set the initial value of the form.

component: form
name: myForm
props:
  initialValue:
    firstName: John
    lastName: Doe

initialValue from query

The initialValue property can be set from a query.

component: form
name: myForm
props:
  initialValues:
    fromQuery:
      name: getCountry
      path: country
  queries:
    - name: getCountry
      query:
        command: >-
          query($organizationId: Int!, $countryCode: String!) { 
            country(organizationId: $organizationId, countryCode: $countryCode) { 
              organizationId
              countryCode
              created
              createdBy
              customValues
              lastModified
              lastModifiedBy
              name 
            }
          }
        variables:
          organizationId: "{{number organizationId }}"
          countryCode: "{{string countryCode }}"