Add form validation for FormulierTaak (optional)

[joeribekker]

I guess we should create a JSON schema that validates the input. A full allowed example is:

{
  "components": [
    {
      "label": "Text Field",
      "key": "textField",
      "type": "textfield"
    },
    {
      "label": "Text Area",
      "key": "textArea",
      "type": "textarea"
    },
    {
      "label": "Upload",
      "fileTypes": [
        {
          "label": "pdf",
          "value": "PDF"
        }
      ],
      "key": "file",
      "type": "file"
    },
    {
      "label": "Radio",
      "values": [
        {
          "label": "a",
          "value": "a"
        }
      ],
      "key": "radio",
      "type": "radio"
    },
    {
      "label": "Checkbox",
      "key": "checkbox",
      "type": "checkbox"
    },
    {
      "label": "Select Boxes",
      "values": [
        {
          "label": "a",
          "value": "a"
        }
      ],
      "key": "selectBoxes",
      "type": "selectboxes"
    },
    {
      "label": "Date",
      "format": "yyyy-MM-dd",
      "enableTime": false,
      "key": "dateTime",
      "type": "datetime"
    },
    {
      "label": "Number",
      "key": "number",
      "type": "number",
      "decimalLimit": 0
    },
    {
      "label": "Select",
      "data": {
        "values": [
          {
            "label": "a",
            "value": "a"
          }
        ]
      },
      "key": "select",
      "type": "select"
    }
  ]
}

Simplistic JSON schema to validate against:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Generated schema for Root",
  "type": "object",
  "properties": {
    "components": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "label": {
            "type": "string"
          },
          "key": {
            "type": "string"
          },
          "type": {
            "type": "string"
          },
          "fileTypes": {
            "type": "array",
            "items": {
              "type": "object",
              "properties": {
                "label": {
                  "type": "string"
                },
                "value": {
                  "type": "string"
                }
              },
              "required": [
                "label",
                "value"
              ]
            }
          },
          "values": {
            "type": "array",
            "items": {
              "type": "object",
              "properties": {
                "label": {
                  "type": "string"
                },
                "value": {
                  "type": "string"
                }
              },
              "required": [
                "label",
                "value"
              ]
            }
          },
          "format": {
            "type": "string"
          },
          "enableTime": {
            "type": "boolean"
          },
          "decimalLimit": {
            "type": "number"
          },
          "data": {
            "type": "object",
            "properties": {
              "values": {
                "type": "array",
                "items": {
                  "type": "object",
                  "properties": {
                    "label": {
                      "type": "string"
                    },
                    "value": {
                      "type": "string"
                    }
                  },
                  "required": [
                    "label",
                    "value"
                  ]
                }
              }
            },
            "required": [
              "values"
            ]
          }
        },
        "required": [
          "label",
          "key",
          "type"
        ]
      }
    }
  },
  "required": [
    "components"
  ]
}