Rendering

Reference a form inside a form

The host form embeds two reusable forms through nested-form bricks: at render time each specRef is resolved by services.specSourceService and inlined — fields, validations and rules included.

Loading the builder…

View the spec

Open in the playground

{
  "type": "panel",
  "id": "column",
  "name": "Form",
  "configs": {
    "key": "nestedHost"
  },
  "children": [
    {
      "type": "input",
      "dataType": "string",
      "id": "text",
      "name": "Full name",
      "configs": {
        "key": "fullName",
        "label": {
          "en": "Full name",
          "fr": "Nom complet"
        }
      },
      "validations": [
        {
          "validator": "required"
        }
      ]
    },
    {
      "type": "panel",
      "id": "nested-form",
      "name": "Nested form",
      "configs": {
        "key": "address",
        "label": {
          "en": "Delivery address",
          "fr": "Adresse de livraison"
        },
        "specRef": "adresse"
      }
    },
    {
      "type": "panel",
      "id": "nested-form",
      "name": "Nested form",
      "configs": {
        "key": "emergency",
        "label": {
          "en": "Emergency contact",
          "fr": "Contact d'urgence"
        },
        "specRef": "contact-urgence"
      }
    }
  ]
}