Home

Welcome to the ngx-json-schema-form wiki! This Wiki will show you how to configure JSON Schema in order use the JSON Schema Form (JSF) project. Below you will find a general overview of formatting your data.

Passing in Data

The schema library requires that the form elements are wrapped in a single JSON schema object. This top level object is not displayed on the form.

Example

{
  "version": "2.0.0",
  "type": "object",
  "properties": {
    <YOUR SCHEMA GOES HERE>
  }
}

Note: it is important to include the JSF version that you are using at the top level of your schema.

Order

The form elements will be displayed in the order that they appear in the schema.

Required Fields

In order to make a field required, the item key must be added to an array of required keys within the containing parent object. See example below.

You are able to have nested objects with their own required fields.

Note: form sections controls can never be required, and radio buttons will always be required.

Example

"personalInfo": {
    "type": "object",
    "name": "Personal Information",
    "description": "Enter information so we can determine who you are"
    "required": ["firstName", 
        "lastName", "age"],
    "properties": {
        "firstName": {
            "name": "First Name",
            "type": "string",
            "tooltip": "The persons first name."
         },
        "lastName": {
            "name": "Last Name",
            "type": "string",
            "tooltip": "The persons last name."
        },
        "age": {
            "type": "number",
            "name": "Age",
            "tooltip": "Age in years which must be equal to or greater than zero.",
        }
    }
}

Tooltips

Tooltips will display additional information on the form control or label on hover. Note: Tooltips will not display for sections.